这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战
前端架构师必备技能之脚手架(二)
脚手架开发流程
- 创建
npm项目 - 创建脚手架入口文件, 在最上方添加
#!/usr/bin/env node
- 配置
package.json添加bin属性 - 编写脚手架代码
- 将脚手架发布到
npm
脚手架使用流程
- 安装脚手架
$ npm install -g your-own-cli
- 使用脚手架
$ your-own-cli
☆开发难点解析
- 分包: 将复杂的系统拆分成若干个模块
- 命令注册:
vue create
vue add
vue invoke
- 参数解析
vue command [options] <params>
-
options 全程:
--version,--help -
options 简写:
-V-h -
带
params的options--path /User/dmw/Desktop/vue-test -
帮助文档
- global help
- Usage
- Options
- Commands
- global help
示例: vue 的帮助信息
$ vue --help
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 create option 的说明
$ vue create --help
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 <proxyUrl> Use specified proxy when creating project
-b, --bare Scaffold project without beginner instructions
--skipGetStarted Skip displaying "Get started" instructions
-h, --help output usage information
# 小小小: 如何设置中文help文档?
- 命令行交互
- 日志打印
- 命令行文字变色
- 网络通信: HTTP/Websocket
- 文件处理
- ............................................
快速入门第一个脚手架
$ mkdir colion-test-cl
$ cd colion-test-cl
$ npm init -y # 初始化项目
$ mkdir bin && cd bin && touch index.js
编辑 /bin/index.js
#!/usr/bin/env node
console.log('welcome colion-test')
编辑 package.json
{
"name": "colion-test-cli",
"version": "1.0.0",
"description": "",
"bin":{
"colion-test": "bin/index.js"
},
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
发布 NPM
$ npm login # 登录
$ npm publish # 发布
使用我的第一个脚手架 colion-test
$ sudo npm install colion-test-cli -g
$ colion-test
welcome colion-test
$ which colion-test
/usr/local/bin/colion-test
$ ls -l
lrwxr-xr-x 1 root admin 48 11 21 23:10 colion-test -> ../lib/node_modules/colion-test-cli/bin/index.js
脚手架本地调试方法
npm link
移除本地调试脚手架
npm unlink
不管用的话用下面这行命令
sudo npm rm --global <module_name>
分包
colion-test-cli 平行创建项目 colion-test-lib
$ cd ..
$ mkdir colion-test-lib && cd colion-test-lib
$ npm init -y
$ mkdir lib && cd lib && touch index.js
# package.json 指定 main
# "main": "lib/index.js",
$ vim index.js
// index.js
module.exports = {
sum(a, b) {
return a + b;
},
};
colion-test-cli 如何引用 colion-test-lib包呢?
$ npm link
$ cd ../colion-test-cli
$ npm link colion-test-lib
$ vim package.json
# add dependencies
"dependencies": {
"colion-test-lib": "1.0.0"
}
编辑 colion-test-cli/bin/index.js
使用 colion-test-lib
#!/usr/bin/env node
const lib = require('colion-test-lib');
console.log(lib);
console.log('welcome colion-test!');
$ colion-test
{ sum: [Function: sum] }
welcome colion-test!
# 调试成功
脚手架本地调试标准流程总结
链接本地脚手架:
$ 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
$ npm unlink your-lib
理解 npm link:
npm link your-lib: 将当前项目中node_modules下指定的库文件链接到node全局node_modules下的库文件npm link: 将当前项目链接到node全局的node_modules中作为一个库文件,并解析bin配置创建可执行文件
理解 npm unlink
npm unlink 将当前项目从 node 全局 node_modules 中移除
npm unlink your-lib 将当前项目中的库文件依赖移除
浅析脚手架命令注册和参数解析
colion-test-lib/lib/index.js
module.exports = {
init() {
console.log('执行init流程')
}
};
colion-test-cli/bin/index.js
#!/usr/bin/env node
// 注册一个命令 colion-test init
// require('process').argv 可以将所有参数以数组的方式罗列出来
const lib = require('colion-test-lib');
const argv = require('process').argv;
const command = argv[2]; // 获取第三个参数作为我们的command
const options = argv.slice(3);
if (options.length > 1) {
let [option, param] = options;
option = option.replace('--', '');
if (command) {
if (lib[command]) {
lib[command]({ option, param });
} else {
console.log('无效的命令');
}
} else {
console.log('请输入命令');
}
}
// 实现参数解析 --version 和 init --name
if (command.startsWith('--') || command.startsWith('-')) {
const globalOption = command.replace(/--|-/g, '');
if (globalOption === 'version' || globalOption === 'V') {
console.log('1.0.0');
}
}
发布上线
$ cd colion-test-lib
$ npm unlink
# 升版本号
$ npm publish
$ cd colion-test-cli
$ npm unlink
$ rm -rf node_modules/
$ npm unlink
$ npm unlink colion-test-lib
$ npm install colion-test-lib -s
# 升版本号
$ npm publish
