• umijs
  • vue-cli
  • 淘宝DEF

Vue-Cli的设计

设计思路

有哪些命令

  • vue create 创建项目 全局的CLI
  • vue ui 管理项目UI 全局的CLI
  • vue-cli-service serve 项目下的CLI
  • vue-cli-service build
  • vue-cli-service lint

分哪几大部分设计

  • 仪表盘
  • 插件
  • 依赖
  • 配置
  • 任务

一些问题

  • 插件的设计，为何，以及如何，可以完成哪些能力扩展？
  • 插件的升级，何时升级如何提醒升级?
  • 插件的版本管理，直接用npm最新的吗？
  • 适用性？VS 团队自己的CLI工具
  • preset的管理？如何注册和管理？如何使用？如何升级的？

Preset

插件集合 & 项目初始化模板

But，Preset如何更新呢？基础架构组决定更新preset，没法更新

  1. // preset.json
  2. // generator.js
  3. // prompts.js
  5. {
  6.   "useConfigFiles": true,
  7.   "cssPreprocessor": "sass",
  8.   "plugins": {
  9.     "@vue/cli-plugin-babel": {
  10.           "version": "^3.0.0", // 可显示指定版本
  11.     },
  12.     "@vue/cli-plugin-eslint": {
  13.       "config": "airbnb",
  14.       "lintOn": ["save", "commit"]
  15.     },
  16.     "@vue/cli-plugin-router": {},
  17.     "@vue/cli-plugin-vuex": {}
  18.   },
  19.   "configs":{
  21.   }
  22. }

插件

一个插件的文件结构

  1. .
  2. ├── README.md
  3. ├── generator.js  # generator (可选)
  4. ├── prompts.js    # prompt 文件 (可选)
  5. ├── index.js      # service 插件
  6. └── package.json

service插件

  1. module.exports = (api, projectOptions) => {
  2.   api.chainWebpack(webpackConfig => {
  3.     // 通过 webpack-chain 修改 webpack 配置
  4.   })
  6.   api.configureWebpack(webpackConfig => {
  7.     // 修改 webpack 配置
  8.     // 或返回通过 webpack-merge 合并的配置对象
  9.   })
  11.   api.registerCommand('test', args => {
  12.     // 注册 `vue-cli-service test`
  13.   })
  14. }

背后结构

安装的包

本地安装的全局包 @vue/cli

项目下的 package.json 

  1.  "devDependencies": {
  2.     "@vue/cli-plugin-babel": "~4.2.0",
  3.     "@vue/cli-plugin-eslint": "~4.2.0",
  4.     "@vue/cli-service": "~4.2.0",
  5.     "babel-eslint": "^10.0.3",
  6.     "eslint": "^6.7.2",
  7.     "eslint-plugin-vue": "^6.1.2",
  8.     "vue-template-compiler": "^2.6.11"
  9.   },

create-react-app

Def-Cli的设计

Umijs的设计

image.png
image.png

一个好的CLI工具

CLI是什么？CLI解决了什么问题？具备什么特性？

封装集成。主要是集成整个开发生命周期功能(init|add|dev|test|publish)。集成各种开发工具提高质量，性能等。将所有的功能都封装在 cli 这个盒子里，通过命令调用。
云端同步。主要是解决了客户端和云的问题，所有都能更好的和项目解耦，和云端同步。

  • 集成脚手架，generator，同步云端的项目模板。
  • 集成Dev构建功能，即我们使用的webpack。
  • 集成CI/CD流程，项目最终是要部署到服务端。
  • 更多围绕开发工具功能集成，通过命令行，或者UI界面集成。
    • test功能，项目健康检查，包检查，类库升级。
  • 需要具备什么特性？
    • 升级能力，自动检测升级。
    • 与项目解耦

如果是云端IDE？这些就都不用解决了，因为云端IDE功能就是在云上。

借鉴