water cli

介绍

• 基于 webpack 整合前端项目中构建配置流程，业务和工程解耦，让开发者可以更专注业务；
• 目前支持 vue/react 项目开发、生产构建流程；

使用说明

安装

$ npm i -g iwater
or
$ yarn global add iwater

$ water
Usage: water
  water create
  water dev
  water prod -i -m [module]
  water umd -i

Params:

  dev:
    -m [module] 模块名称
    -i 是否打印详细信息

  prod:
    -m [module] 模块名称
    -i 是否打印详细信息

  umd:
    -i 是否打印详细信息

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  create          初始化项目
  dev             开发环境构建
  prod            生产环境构建
  umd             公共包构建

命令说明

1. water create: 项目模板初始化，内置了 react/vue es/ts 版本的模板；
2. water dev: 开发环境构建，基于 webpack-dev-server, 整合 eslint/stylelint 语法监测，支持 hrm 实时热更新；
3. water prod -i: 生产环境构建，统一构建产物，支持代码 chunk 拆包，并支持打包分析；
4. water umd -i: umd 打包，可用于制作 cdn 整合包，比如 react/react-router/react-router-dom 合并为一个包；

初始化模板说明

water create 调取的模板将是这里中的一个，目前模板比较架构比较简陋，后期会考虑扩展模板功能；

# 模板文件结构
.
├── react # react jsx 模板
│   ├── dist # 构建产物
│   │   ├── index.html
│   │   └── static
│   │       ├── images
│   │       │   └── favicon.ico
│   │       ├── scripts
│   │       │   ├── app.66734.js
│   │       │   ├── app.66734.js.LICENSE.txt
│   │       │   └── common.05092.js
│   │       └── styles
│   │           └── app.78e30.css
│   ├── package.json
│   ├── src
│   │   ├── app.jsx # 必须 主入口文件
│   │   ├── assets
│   │   │   ├── images
│   │   │   │   └── favicon.ico
│   │   │   └── styles
│   │   │       ├── animate.scss
│   │   │       ├── common.scss
│   │   │       └── variable.scss
│   │   ├── index.html # 必须 主入口 html
│   │   ├── index.scss
│   │   ├── pages
│   │   │   ├── app.jsx
│   │   │   ├── index.scss
│   │   │   └── views
│   │   │       ├── index.jsx
│   │   │       └── other.jsx
│   │   └── source
│   │       ├── auth.js
│   │       ├── http.js
│   │       └── storage.js
│   ├── water.config.js # 必须 cli 核心配置文件
│   └── yarn.lock
├── react-ts # react typescript 模板
│   ├── dist # 构建产物
│   │   ├── index.html
│   │   └── static
│   │       ├── scripts
│   │       │   ├── app.870da.js
│   │       │   ├── app.870da.js.LICENSE.txt
│   │       │   └── common.05092.js
│   │       └── styles
│   │           └── app.78e30.css
│   ├── package.json
│   ├── src
│   │   ├── app.tsx # 必须 主入口文件
│   │   ├── assets
│   │   │   ├── images
│   │   │   │   └── favicon.ico
│   │   │   └── styles
│   │   │       ├── animate.scss
│   │   │       ├── common.scss
│   │   │       └── variable.scss
│   │   ├── index.html # 必须 主入口 html
│   │   ├── index.scss
│   │   ├── pages
│   │   │   ├── app.tsx
│   │   │   ├── index.scss
│   │   │   └── views
│   │   │       ├── index.tsx
│   │   │       └── other.tsx
│   │   └── source
│   │       ├── auth.ts
│   │       ├── http.ts
│   │       └── storage.ts
│   ├── tsconfig.json # typescript 配置文件
│   ├── water.config.js # 必须 cli 核心配置文件
│   └── yarn.lock
├── vue # vue js 模板
│   ├── dist # 构建产物
│   │   ├── index.html
│   │   └── static
│   │       ├── images
│   │       │   └── favicon.ico
│   │       ├── scripts
│   │       │   ├── app.9a6e3.js
│   │       │   ├── app.9a6e3.js.LICENSE.txt
│   │       │   └── common.05092.js
│   │       └── styles
│   │           └── app.dc868.css
│   ├── package.json
│   ├── src
│   │   ├── app.js # 必须 主入口文件
│   │   ├── assets
│   │   │   ├── images
│   │   │   │   └── favicon.ico
│   │   │   └── styles
│   │   │       ├── animate.scss
│   │   │       ├── common.scss
│   │   │       └── variable.scss
│   │   ├── index.html # 必须 主入口 html
│   │   ├── index.scss
│   │   ├── pages
│   │   │   ├── app.vue
│   │   │   ├── other.vue
│   │   │   └── routes.js
│   │   └── source
│   │       ├── auth.js
│   │       ├── http.js
│   │       └── storage.js
│   ├── water.config.js # 必须 cli 核心配置文件
│   └── yarn.lock
└── vue-ts # vue typescript 模板
    ├── package.json
    ├── src
    │   ├── app.ts # 必须 主入口文件
    │   ├── assets
    │   │   ├── images
    │   │   │   └── favicon.ico
    │   │   └── styles
    │   │       ├── animate.scss
    │   │       ├── common.scss
    │   │       └── variable.scss
    │   ├── index.html # 必须 主入口 html
    │   ├── index.scss
    │   ├── pages
    │   │   ├── app.vue
    │   │   ├── other.vue
    │   │   └── routes.ts
    │   └── source
    │       ├── auth.ts
    │       ├── http.ts
    │       └── storage.ts
    ├── tsconfig.json # typescript 配置文件
    ├── typings # vue 相关 typescript 全局类型说明
    │   ├── shims-tsx.d.ts
    │   └── shims-vue.d.ts
    ├── water.config.js # 必须 cli 核心配置文件
    └── yarn.lock

water.config.js 核心配置文件说明

构建核心依赖文件，water 将读取该配置文件，继而进行相应的行为；

1. vue 模板默认对 element-ui 支持了按需加载
2. react 模板默认对 antd 支持了按需加载

// 接口前缀
const apiPrefix = "https://api.test.example.com";
// const apiPrefix = "https://api.test.example.com";

const proxyMapping = {};
// 接口 uri 前缀
const uriPrefix = ["/api"];

// 代理映射
uriPrefix.map(
  (uri) =>
    (proxyMapping[uri] = {
      target: apiPrefix,
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        [`^${uri}`]: apiPrefix + uri,
      },
    })
);

module.exports = {
  // 允许端口
  port: 3001,
  // 代码 chunk 打包分析端口，仅在生产打包配置才生效，端口自定义
  analyzerPort: null,
  // 解析路径，用于映射 src 下路径为 @/source，@/pages， @/assets
  resolvePath: "src",
  // 读取 app.ts 根路径
  target: "./src",
  // 打包 chunk 文件 前缀根路径
  publicPath: "/",
  // 打包导向路径
  buildPath: "./dist",
  // 复制路径，需要做文件迁移的路径，该目录下文件将被直接转移到 dist 根路径
  // 比如 微信校验文件、robot.txt 等无项目依赖类型的文件
  copyPath: "./src/assets/public",
  // api 代理，仅在开发环境生效
  proxy: proxyMapping,
  // css 预编译期配置，内置了 less/sass 按需配置
  css: ["sass"],
  // 内置了 markdown-loader，项目中可将 markdown 文件直接转义为标准 html
  markdown: false,
  // 拆包配置，必须配置 ['antd', 'echarts'] 这里将项目中 antd/echarts 相关的包单独打包到 antd.js/echarts.js 中
  splitPackages: ["antd", "echarts"],
  // vue 项目设置为 true
  vue: true,
  // react 项目配置
  react: {
    // 项目中是否使用了 antd，对于 antd 引入了优化方案，moment 替换 dayjs 的操作
    antd: true,
    // 是否覆盖 antd 主题，这里配置好自定义的主题地址即可，cli 会检测文件存在则启用，否则不生效
    antdLess: "./src/assets/styles/antd.less",
  },
  // 外部依赖，打包忽略，这里再 water prod 模式才生效
  externals: {},
  // TODO 后续将根据使用情况在进行拓展，以上其实已经可以兼容大多数场景
};

umd 打包案例

参考 examples/umd 下案例，主要用于制作公共工具包

• 目录结构

.
├── package.json
├── src
│   ├── react
│   │   └── index.ts # entry 扫描入口
│   └── react-router
│       └── index.ts # entry 扫描入口
└── water.config.js # 核心配置文件

• water umd -i 打包

# 打包结构
.
├── react
│   ├── index.js
│   └── index.js.LICENSE.txt
└── react-router
    ├── index.js
    └── index.js.LICENSE.txt

• water.config.js 配置文件

module.exports = {
  // 分析 chunk 包明细监听端口
  analyzerPort: 8888,
  // 目的路径，默认检索该目录下 **/index.(t|j)s 结构
  target: "./src",
  // 构建路径
  buildPath: "./dist",
};

TODO

1. 模板优化；

• 范例化，增加更多可选支持，比如 element-ui/antd 相关模板支持，再比如 vuex/mobx 相关模板支持，等等；

2. 集成自动化测试；

关于我

坚持原创，面向大前端，构建前端、数据结构与算法、面经知识体系，共享优质干货，助力更多前端开发者。

1. 公众号「前端艺匠」作者；
2. 掘金「水逆」 作者;
3. 欢迎交流，大家共同探讨，共享资源，共同进步。