npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hsdata/web-helper

v0.0.27

Published

frame helper

Downloads

32

Readme

@hsdata/web-helper

安装和使用

npm i @hsdata/web-helper --save-dev 

或  

yarn add @hsdata/web-helper --dev

Proxy代理

1、在根目录下新建 .hsdata.proxy.js 文件,配置项如下:


module.exports = {
  /**
   * 本地启动端口(更改后需重启)
   **/
  port: 8080,
  /**
   * 本地前端子模块名称(更改后需重启)
   **/
  name: 'template',
  /**
   * 后端服务连接地址
   **/
  backendServer: [
    // 后端服务代理位置
    {
      // <0> 标品测试环境
      apiUrl: 'http://10.5.23.202:8038',
      apiEnv: 'cloudtest'
    },
    {
      // <1> 标品orcale测试环境
      apiUrl: 'http://10.32.12.187:18078',
      apiEnv: 'bpcloud'
    },
    {
      // <2> 标品orcale测试环境
      apiUrl: 'http://192.168.151.15:8088',
      apiEnv: 'swhy'
    }
  ][0],
  /**
   * 后端服务配置地址,可配置链接到后端本地
   **/
  backendServerVersions: {
    consultant: '-xxx' // 相当于前端将前端访问地址 /cloudtest/consulatant/v/xxx/xxx 反向代理到 /cloudtest/consultant-xxx/v/foo
  },
  /**
   * 前端主系统基础地址
   **/
  frontEndMainSystemUrl: ['http://127.0.0.1:9096', 'http://127.0.0.1:8000', 'http://10.5.23.202:8038'][2],
  /**
   * 是否开启 socket 推送
   **/
  openSocket: false,
  /**
   * 是否过滤启动模块,为 true 时会根据 localStartupSubModules 配置启动指定子模块
   **/
  filterStartupModule: true,
  localStartupSubModules: [
    // TODO 本地启动子模块集合 --- 待实现
    'lcgl'
  ],
  /**
   * 系统所有可用子模块名称
   **/
  subModules: [
    'lcgl'
  ],
  /**
   * 在vue devtools里面打开的IDE配置
   * 具体类型参见 open-in-editor 开源项目支持的 editor 配置
   **/
  openInEditor: {
    editor: 'webstorm'
  }
}

2、引用代理中间件等,在打包配置文件中使用

const {
  proxyConfig,
  getConfigMiddleware,
  getOpenInEditorMiddleware
} = require('@hsdata/web-helper/dist/proxy')

module.exports = {
  // ...
  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.push(getConfigMiddleware())
      middlewares.push(getOpenInEditorMiddleware())

      return middlewares
    },
    proxy: proxyConfig
  },
  // ...
}

Vendor 打包排除,通过cdn引入 vendor.js的方式加载各项库

1、通过如下命令:

hsd-cv dev  复制development环境下的vendor
hsd-cv prod 复制production环境下的vendor

dev和prod命令参数如下:

  • -d, --dest,目标目录,默认:./public/vendor
  • -c, --clear,是否清除目标目录,默认false,请确认好目标目录再使用,如果文件参数后可能会造成无法找回。

2、在public下的index.html中引用


<head>
  <link rel="stylesheet" href="vendor/vendor.css?timestamp=<%= htmlWebpackPlugin.options.timestamp %>">
  <script defer src="vendor/vendor.js?timestamp=<%= htmlWebpackPlugin.options.timestamp %>"></script>
</head>

3、在打包配置文件中引用 externals

const {externals} = require('@hsdata/web-helper/dist/vendor')

module.exports = {
  // ...
  externals
  // ...
}

4、vendor已挂载的项如下:

const vendor = {
  // public直接加载vendor时开启
  vue: 'root __dw_global_Vue',
  vuex: 'root __dw_global_Vuex',
  'vue-router': 'root __dw_global_VueRouter',
  'ant-design-vue': 'root __dw_global_Antd',
  'element-ui': 'root __dw_global_ElementUI',
  // 'dui-vue': 'dui',
  // 'dui-vue/lib/utils': 'DUtils',
  // 'dui-vue/lib/echart': 'DUIEcharts',
  // 'dui-vue/lib/io': 'DUIIO',
  // lodash: '_',
  axios: 'root __dw_global_axios',
  d3: 'root __dw_global_d3',
  // 'core-js': 'CoreJs',
  moment: 'root __dw_global_moment',
  lodash: 'root _',
  'crypto-js': 'root __dw_global_CryptoJS',
  'd3-hierarchy': 'root __dw_global_d3Hierarchy',
  dayjs: 'root __dw_global_dayjs',
  handsontable: 'root __dw_global_handsontable',
  html2canvas: 'root __dw_global_html2canvas',
  jspdf: 'root __dw_global_jspdf',
  xcrud: 'root __dw_global_xcrud',
  'js-base64': 'root __dw_global_JsBase64',
  pptxgenjs: 'root __dw_global_PptxGenJS',
  qrcode: 'root __dw_global_QRcode',
  'sharedb/lib/client': 'root __dw_global_sharedb',
  vcolorpicker: 'root __dw_global_vcolorpicker',
  // vconsole: 'VConsole',
  'vue-grid-layout': 'root __dw_global_VueGridLayout',
  'vue-color': 'root __dw_global_VueColor',
  'vue-codemirror': 'root __dw_global_VueCodemirror',
  '@handsontable/vue': 'root __dw_global_VueHandsontable'
}