@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',
    },
  },
});