@hsdata/web-helper NPM

@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'
}

commander default-gateway ejs http-proxy-middleware ipaddr.js launch-editor-middleware urlencode

@everything-registry/sub-chunk-403

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago