Vue 项目基础配置
webpack
配置,适用于基于 Vue 的 web
项目。
1. 如何使用
安装
bash
pnpm add @plugin-light/project-config-vue -D
在 vue.config.js
中添加如下设置:
js
const { WEBPACK_BASE_CONFIG } = require('@plugin-light/project-config-vue');
const { merge } = require('webpack-merge');
module.exports = merge(WEBPACK_BASE_CONFIG, {
transpileDependencies: ['press-ui'],
});
或者使用 getWebpackBaseConfig
方法:
js
const { getWebpackBaseConfig } = require('@plugin-light/project-config-vue');
const { merge } = require('webpack-merge');
module.exports = merge(getWebpackBaseConfig({
isUseVueLoader: true,
isVue3: false,
useXSS: true,
}), {
transpileDependencies: ['press-ui'],
});
2. 类型及默认参数
2.1. getWebpackBaseConfig 参数
getWebpackBaseConfig
接收一个对象作为参数。完整类型定义。
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
port | number | 端口 | - |
https | boolean | 是否使用 https | - |
isUseVueLoader | boolean | 是否使用 vue-loader | true |
isVue3 | boolean | 是否是 Vue3 项目 | false |
useXSS | boolean | 是否使用 XSS 过滤,需要提前在 Vue 原型上挂载 xss 方法 | true |
useIfDefLoader | boolean | 是否使用 ifdef-loader | true |
handleIfDefFiles | Array<string> | ifdef-loader 要处理的文件 | /(press-ui|component|press-plus|@tencent\/pmd-).*(\.vue|\.ts|\.js|\.css|\.scss)$/ |
terserPureFuncs | Array<string> | 打包去除 console 日志的方法 | ['console.log', 'console.table'] |
transpileDependencies | Array<string> | 需要编译的第三方依赖 | - |
shadowProjectMap | Record<string, string> | 映射的项目 | - |
customCdnUrls | Array<string> | 自定义的 cdn 链接,用于 externals | - |
usePMDBusinessAlias | boolean | 是否使用 pmd-business alias | - |
useWorkBoxPlugin | {} | 是否使用 work-box | - |
lessAlias | boolean | 不加额外的 alias | false |
useUniSimpleRouterCDN | boolean | 是否要将 uni-simple-router 设置外链 cdn | false |
outputDirMode | string | 打包产物目录 | dist/${VUE_APP_DIR}/static |
2.2. handleIfDefFiles
handleIfDefFiles
默认值如下:
ts
/(press-ui|component|press-plus).*(\.vue|\.ts|\.js|\.css|\.scss)$/;
2.3. transpileDependencies
transpileDependencies
默认值如下:
ts
[
'pmd-merchant-ui',
'press-ui',
'press-plus',
'pmd-aegis',
'pmd-app-info',
'pmd-config',
'pmd-location',
'pmd-login',
'pmd-network',
'pmd-report',
'pmd-tools',
'pmd-types',
'pmd-widget',
'pmd-vue',
'pmd-jsapi',
];
3. 常见问题
3.1. console 日志去除是如何做的,以及如何保留
生产环境下,即process.env.NODE_ENV
为production
时,默认去掉console
日志,可以通过terserPureFuncs
传递空数组来恢复显示。
注意同时去掉babel
插件transform-remove-console
。
3.2. 打包产物分析怎么做
当 process.env.npm_config_report
不为 falsy
时,本工具会使用 webpack-bundle-analyzer
插件,开发者可用来进行打包分析。
否则,在 production
模式下,保存打包分析产物到 my-bundle-analyze.html
文件中,可以在流水线中进行归档。
3.3. 调试模式怎么打开
当 process.env.DEBUG_MODE
不为 falsy
时,本工具会设置 configureWebpack.optimization.minimize
为 false
,开发者可以用来进行产物的代码分析。
3.4. 业务中获取分支名等变量
流水线会注入以下环境变量:
bash
# 分支
VUE_APP_BRANCH
# 发布人
VUE_APP_AUTHOR
业务可以参考下面的方式获取:
ts
const CUR_BRANCH = (process.env.VUE_APP_BRANCH || 'develop').replace(/\//, '.');
const shareUrl = `https://foo/bar.${CUR_BRANCH}/`
3.5. 业务库中条件编译不生效
默认情况下,条件编译工具并不处理业务库代码,可以通过 handleIfDefFiles
字段调整配置,比如:
ts
getWebpackBaseConfig({
handleIfDefFiles: /(src|press-ui|component|press-plus|@tencent\/pmd-).*(\.vue|\.ts|\.js|\.css|\.scss)$/,
})