脚手架开发：脚手架开发的流程以及本地调试、分包调试

May 29, 2021

Always be yourself, express yourself, have faith in yourself, do not go out and look for a successfull personality and duplicate it.

— Bruce Lee

明确脚手架开发的基本流程、重难点，以及本地调试方法和技巧。

脚手架开发流程详解

创建npm项目

 npm init -y

创建bin文件夹，在bin文件夹下面创建脚手架入口文件index.js，最上方添加：

  // 让index.js文件变成可执行文件，类似***.exe文件一样
  #!/usr/bin/env node

配置package.json，添加 bin属性，类似如下：

 {
 "name": "imooc-test-jun",
 "version": "1.0.0",
 "description": "",
 "bin": {
   "imooc-test-jun": "bin/index.js"
 },
 "main": "index.js",
 ...
 ...
 ...
 }

编写脚手架代码
将脚手架发布到npm
- npm login
- npm publish

脚手架开发难点解析

分包：将复杂的系统拆分成若干个模块
命令注册：

 vue create
 vue add
 vue invoke

参数解析：
- options全称：--version、--help...
- options简写：-V、-h...
- 带params的options：--path /Users/sam/Desktop/vue-test
帮助文档：
- global help
- Usage
- Options
- Commands
示例：vue的帮助信息：

 Usage: vue <command> [options]

Options:
   -V, --version                              output the version number
   -h, --help                                 output usage information

Commands:
 create [options] <app-name>                create a new project powered by vue-    cli-service
 add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
 invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
 inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
 serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
 build [options] [entry]                    build a .js or .vue file in production mode with zero config
 ui [options]                               start and open the vue-cli ui
 init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
 config [options] [value]                   inspect and modify the config
 outdated [options]                         (experimental) check for outdated vue cli service / plugins
 upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
 migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
 info                                       print debugging information about your  environment

 Run vue <command> --help for detailed usage of given command.

command help
- Usage
- Options

示例：vue create的帮助信息：

 Usage: create [options] <app-name>

 create a new project powered by vue-cli-service

 Options:
   -p, --preset <presetName>       Skip prompts and use saved or remote preset
   -d, --default                   Skip prompts and use default preset
   -i, --inlinePreset <json>       Skip prompts and use inline JSON string as   preset
   -m, --packageManager <command>  Use specified npm client when installing dependencies
   -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
   -g, --git [message]             Force git initialization with initial commit message
   -n, --no-git                    Skip git initialization
   -f, --force                     Overwrite target directory if it exists
   --merge                         Merge target directory if it exists
   -c, --clone                     Use git clone when fetching remote preset
   -x, --proxy                     Use specified proxy when creating project
   -b, --bare                      Scaffold project without beginner instructions
   --skipGetStarted                Skip displaying "Get started" instructions
   -h, --help                      output usage information

还有很多，比如：
- 命令行交互
- 日志打印
- 命令行文字变色
- 网络通信：HTTP/WebSocket
- 文件处理

脚手架本地调试方法：npm link的标准流程

链接本地脚手架：

  cd  your-cli-dir
  npm link

链接本地库文件：

  cd your-lib-dir
  npm link
  cd your-cli-dir
  npm link your-lib

取消链接本地库文件：

cd your-lib-dir
npm unlink
cd your-cli-dir
// link存在
npm unlink your-lib
// link不存在
rm -rf node_modules
npm install -S your-lib

理解npm link
- npm link：将当前项目链接到node全局中作为一个库文件，并解析bin 配置创建可执行文件
- npm link your-lib：将当前项目中node_modules下指定的库文件链接到全局node_modules下的库文件
理解npm unlink
- npm unlink：将当前项目从node全局node_modules中移除
- npm unlink your-lib：将当前项目中的库文件依赖移除