@engage/fe-cli 是为了让接入 engage 平台的前端开发更快速、方便而提供的一个包。该包主要对外提供几个命令行命令及方法,开发时配合使用能够大大提高前端开发人员的开发效率。
# 命令
# engage-fe-cli-webpack-dev
本地开发时使用,用于本地启动前端微服务工程。使用 webpack 打包,已默认配置入口文件、文件加载 loader 、输出等 webpack 配置,默认将通用依赖 明确为 externals 。
使用:
需要在工程根目录下创建 webpack.config.js 文件,并加入以下配置:
process.env.HOST = 'localhost'; // 启动域名
process.env.PORT = '6039'; // 启动端口
process.env.PUBLIC_PATH = process.env.PUBLIC_PATH || `http://localhost:${process.env.PORT}/workflow/mfe-workflow/`; // html-webpack-plugin 插件的 publicPath 值
process.env.API_URL_PREFIX = process.env.API_URL_PREFIX || 'https://alpha-engage.gridsumdissector.com/sample-app/api'; // url 前缀,如果没有可以不填
process.env.LOGIN_URL = process.env.LOGIN_URL || 'https://alpha-engage.gridsumdissector.com/platform/login/'; // 无权限时跳转的登录页面地址,如果自己处理登录,可不填
process.env.TITLE_SUFFIX = process.env.TITLE_SUFFIX || '- 本地环境'; // 页面显示在浏览器中的标签标题后缀
# engage-fe-cli-webpack-build
前端微服务工程发布时使用,用于打包前端工程,将其按照 webpack 配置打包到 dist(默认)文件夹下。默认打包为 umd 格式。
# engage-fe-cli-stylelint
用于校验样式是否符合规范。
# engage-fe-cli-i18n-detection
本地开发时使用,用于将前端工程代码中的中文替换为 $t('<prefix><中文>')
,prefix 由前端工程根目录文件 package.json 的 i18nPrefix 属性配置。
# engage-fe-cli-i18n-extract
本地开发时使用,用于抽取前端工程代码中 $t('<prefix><中文>')
中的中文,并自动生成 src/i18n/index.js、src/i18n/zh-CN.js、src/i18n/en-US.js 。更多使用详情见detail。生成的文件示例如下:
** src/i18n/index.js **
module.exports = {
'zh-CN': require('./zh-CN'),
'en-US': require('./en-US'),
};
** src/i18n/zh-CN.js **
module.exports = {
"wf:正在加载": "正在加载",
"wf:取消": "取消",
}
** src/i18n/en-US.js **
module.exports = {
"wf:正在加载": "loading",
"wf:取消": "cancel",
}
# 方法
# createWebpackConfig
当用户需要自定义 webpack 打包参数时使用。
输入:
{
customConfig, // 自定义配置,参考 webpack 配置
overrideParams // HtmlWebpackPlugin 插件配置覆盖,参考 https://www.npmjs.com/package/html-webpack-plugin
}
举例说明:
在工程根目录下创建 webpack.config.js 文件,文件内容如下。
module.exports = require('@engage/fe-cli').createWebpackConfig({
customConfig: {
output: {
library: 'mfe-workflow',
},
},
});