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