NodeCli工具实践

基础介绍

CLI(command-line-interface) 是一个命令行程序，它接受文本输入以执行操作系统功能。简单得来说就是不同于我们的图形操作界面, 可以通过命令行来执行的程序。例如我们比较熟悉的CLI工具有npm、vue-cli、creat-react-app等等都是我们比较熟悉的CLI工具。 我们通过CLI执行操作系统功能，最主要的作用是可以让将日常繁琐且重复的开发步骤简化并抽象为一个CLI工具，帮助我们简化开发。

实践背景

• 多个项目分别管理自己的webpack配置，webpack进行bug修复或升级更迭时需要多个项目分别修改，重复劳动，难以维护，易导致项目构建版本和配置差异。
• 每次新建项目，都需要复制粘贴，删除多余文件，修改项目个性化配置及通用交互等，操作重复麻烦，易遗漏部分相关修改。

目标

• 建立一个统一管理项目的cli工具edt-cli
• 统一构建流程及构建产物
• 减少项目更新迭代的重复劳动
• 自定义脚手架支持项目初始化使用命令行自动生成项目模板

webpack Cli工具

统一整合项目共用的webpack配置，创建webpack的cli工具。支持项目无需再编写详细的配置，只需要一行命令即可实现构建打包流程。统一管理多项目的构建流程和版本，减少重复劳动力，提高工作效率。

使用方式：

1. 项目中安装test-edt-cli
2. 修改webpack相关配置，保留项目个性化配置
3. 构建打包命令中使用edt-webpack进行构建打包

使用前后对比：

1. 项目配置目录：

• 原有项目配置目录

-_server.js

-.babelrc

-webpack.common.js

-webpack.config.js

-webpack.prod.config.js

• 现有项目配置目录：

-webpack.config.js

2. 项目配置内容：

原有项目配置内容包含了所有配置具体明细

现有项目配置只需保留自定义配置

以模板配置为例，项目需配置的全部内容如下：

const path = require('path')

const TEST_SERVER_URL = 'https://***/'
const URL_SETTING = {
target: TEST_SERVER_URL,
secure: false,
cookieDomainRewrite: '*'
}

const webpackDevServerConfig = {
historyApiFallback: {
  index: '/aop/'
},
port: 9700,
proxy: {
  '/users//*': URL_SETTING
}
}

const webpackCommonConfig = {
entry: ['./app/index.js'],
resolve: {
  alias: {
    'icons': path.resolve(__dirname, 'app/icons'),
    'request': path.resolve(__dirname, 'app/request'),
    'utils': path.resolve(__dirname, 'app/utils'),
    'stores': path.resolve(__dirname, 'app/stores'),
    'constants': path.resolve(__dirname, 'app/constants'),
    'application': path.resolve(__dirname, 'app/pages/application'),
    'home': path.resolve(__dirname, 'app/pages/home'),
    'loginManager': path.resolve(__dirname, 'app/pages/loginManager'),
    'components': path.resolve(__dirname, 'app/pages/components'),
  }
},
}

const webpackDevConfig = {}

const webpackProdConfig = {}

module.exports = {
webpackDevServerConfig,
webpackCommonConfig,
webpackDevConfig,
webpackProdConfig
}

3. 构建打包命令：

• 原有命令：

    "start": "cross-env NODE_ENV=development node _server.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js --inline --colors --progress --display-reasons",  

• 现有命令：

    "start": "cross-env NODE_ENV=development test-edt-webpack",
    "build": "cross-env NODE_ENV=production test-edt-webpack",

自定义脚手架

建立一套我们项目公用的项目模板，统一项目结构和配置打包相关内容，支持一行命令一键生成项目内容，减少每次新建项目需要复制黏贴和修剪枝叶的重复劳动力，提高工作效率。

使用方式：

1. 全局安装test-edt-cli工具包
2. 执行test-edt-create-app命令
3. 命令执行成功即可生成项目通用模板，开始项目业务开发。

使用前后对比：

1. 使用前

• 需要复制粘贴其他项目结构，再删除多余的业务代码
• 需要找到package.json等各种文件修改项目自定义内容
• 容易漏改，误改，遗留被复制的项目内容

2. 使用后

• 无需复制粘贴，一行命令一键生成项目代码
• package.json文件的自定义内容由使用脚手架命令时用户输入自动生成，后续无需进入文件修改代码
• 模板已去除所有业务相关代码，无需再删删减减

后续

cli工具后续可以拓展做的事情还有很多。

后续待完成工作：

1. 支持其他模板定制：webpack5引入，使用react17，使用typeScript等
2. webpack5配置升级直接在cli中直接升级，一次升级，多个项目运用
3. cli工具在前端工程化上能做的东西还有很多，后续可以继续拓展相关功能