Node脚手架编写初学者教程
完整的脚手架代码
编写你的第一个脚手架
前言
随着NodeJs的崛起,现代前端工程已经变得越来越复杂。前端框架如雨后春笋。从Backbone,Ember,Knockout,Spine,Batman框架的崛起到Angular,React,Vue平分天下,我们经历太多代码风格的变革。
不可避免学习新的框架,复杂的环境又让初学者很难入手。就拿React来说,我们要使用Babel,Webpack等模块辅助编译,我们还需要Redux,Immutable,Mocha,Jest,Antd或者其他第三方包(如eslint,lodash,moment,debug,uuid,request,co,koa等)辅助业务需求。
目录结构越来越复杂,为了让每个项目使用的统一的技术和目录结构,各大模块纷纷推出了自己的脚手架工具,比如redux-cli,create-react-app,vue-cli等。现在就让我们以any-cli为例,编写自己的脚手架工具吧。
核心原理
yoeman
搭建项目需要提供yoeman-generator
。yoeman-generator
本质上就是一个具备完整文件结构的模板,用户需要手动地把这些模板下载到本地,然后yoeman
就会根据这些模板自动生成各种不同的项目。
vue-cli提供了相当丰富的选项和设定功能,但是其本质也是从远程仓库把不同的模版拉取到本地,而并非是什么“本地生成”的黑科技。
这样看来,思路也就有了——首先建立不同的模板,然后脚手架根据用户的指令引用模板生成实际项目。
模板既可以内置在脚手架当中,也可以部署在远程仓库。
内置在脚手架中,使用
node file
操作来把模板克隆到本地。优点是不用新建仓库保存模板。尤其是有多项目模板时候,比如
init pc
与init mobile
分别生成两个不同项目,我们只需要一个仓库保存脚手架即可。第二个优点:无论脚手架还是模板变更,只需要提交一次。
部署在远程仓库,使用
git clone
把项目克隆到本地。优点是每次模板有代码变更时,无需让用户本地升级脚手架。
如果模板内置在脚手架里,每次模板变更,因为是在同一仓库,所以用户需要升级脚手架。而部署在远程仓库则不同,我们只需要git clone即可获取最新模板。
整体流程
按照标准惯例,先看下整体流程(github不支持流程图flow类型展示,好搓,害的我又把流程代码改成这种挫样式)
添加模板->输入模板名->是否有重名模板?-添加成功:给出提示
删除模板->输入模板名->是否有模板?-删除成功:给出提示
模板列表->列出所有模板
初始化模板-输入模板名-是否有模板?-输入模块名-克隆远程仓库到本地模块-切换分支:给出提示复制代码
技术要点
process.cwd()与__dirname
命令都位于脚手架中,而执行命令的地方常常在模板项目中。
比如脚手架路径是/usr/local/lib/node_modules/any-cli/lib/
,执行全局脚手架命令路径是/Users/admin/test/
。
想要脚手架代码想读脚手架目录下的a.js
文件写入模板项目(执行全局脚手架命令位置)b.js
中,那么readFile的路径为path.resolve(__dirname,'a.js')
,writeFile路径为path.resolve(process.cwd(),'b.js')
。就这么简单。
bin
许多npm模块有可执行文件希望被安装到全局系统路径。
需要在package.json中提供一个bin字段,它是一个命令名称到文件路径的映射。如下:
"bin": {
"any": "./bin/any"
},复制代码
这样会把any命令和本地可执行文件./bin/any建立映射。也就是说,当你在命令行执行any命令时,会执行./bin/any可执行文件。
全局安装,npm将会使用符号链接把这些文件链接到/usr/local/bin目录下,系统的二进制命令全部在这里。
如果是本地安装,会链接到./node_modules/.bin目录下。只有当前目录运行any命令时,才会生效。
如果你只有一个可执行文件,那么它的名字应该和包名相同,此时只需要提供这个文件路径(字符串),比如:
{
"name": "any-cli",
"version": "1.2.5",
"bin": "./bin/any"
}复制代码
等同于:
{
"name": "any-cli",
"version": "1.2.5",
"bin": {
"any-cli": "./bin/any"
}
}复制代码
npm link
本地目录链接到全局模块
npm link可以把本地目录链接到全局模块下。
对于开发模块者而言,这算是最有价值的命令了。比如我们开发
any-cli
模块时,需要在命令行中使用any
来测试我们的代码(开发中没有发布,也就无法全局安装模块)。不要担心,使用npm link一切变得非常容易。比如我们
any-cli
项目package.json里,有一条命令如下:"bin": { "any": "./bin/any" },复制代码
命令行中使用npm link
$ npm link复制代码
得到以下结果
/usr/local/bin/any -> /usr/local/lib/node_modules/any-cli/bin/any /usr/local/lib/node_modules/any-cli -> /Users/lihongji/work/any-cli复制代码
分别进入/usr/local/bin与/usr/local/lib/node_modules目录下查看。我们发现里面分别多了
any
可执行文件与any-cli
目录。
这样,每次本地仓库有改动时,全局命令也随之更新。我们就可以边开发边测试了。本地目录引用全局模块
如果你还有其他模块
any-cli-test
依赖于any-cli
模块,你可以使用如下命令把全局any
链接到当前模块下。$ cd ~/work/any-cli-test $ npm link any-cli # 把全局模式的模块链接到本地复制代码
npm link test 命令会去
/usr/local/lib/node_modules
目录下查找 any-cli的模块,找到这个模块后把/usr/local/lib/node_modules/any-cli
的目录链接到当前any-cli-test
下的./node_modules/any-cli
目录上。现在任何 test 模块上的改动都会直接映射到 test-example 上来。
其他字段:engine与engineStrict
node7.6.0开始支持async,如何保证用户本地安装node7.6.0以上版本呢复制代码
engine
你可以在本地安装node特定版本:"engines": { "install-node": "7.6.0" }复制代码
安装后,在本地node_modules/.bin目录下会多一个node可执行文件。本地的任何node命令都会使用这个版本的node可执行文件。
你可以指定工作的node的版本:
{ "engines" : { "node" : ">=0.10.3 <0.12" }="" }<="" code="">0.12">复制代码
并且,像
dependensies
一样,如果你不指定版本或者指定“*”作为版本,那么所有版本的node都可以。如果指定一个
engines
字段,那么npm
会需要node
在里面,如果“engines”被省略,npm会假定它在node上工作。你也可以用
engines
字段来指定哪一个npm
版本能更好地初始化你的程序,如:{ "engines" : { "npm" : "~1.0.20" } }复制代码
除非用户设置
engine-strict
标记,这个字段只是建议值。engineStrict
如果你确定你的模块一定不会运行在你指定版本之外的node
或者npm
上,你可以在package.json
文件中设置engineStrict:true
。它会重写用户的engine-strict
设置。
第三方包:pre-commit/node-config/commander/chalk
这几个包分别用来处理提交执行脚本,全局配置文件管理与命令行处理。会在代码中一一讲解。
代码文件
创建any-cli
项目
work$mkdir any-cli
work$cd any-cli
any-cli$git init && npm init复制代码
package.json内容
{
"name": "any-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"pub": "npm version patch && npm publish",
"pre-commit": "eslint src"
},
"author": "antgod",
"devDependencies": {
"eslint": "^3.16.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-babel": "^3.0.0",
"eslint-plugin-import": "^1.6.1",
"eslint-plugin-jsx-a11y": "^2.0.1",
"eslint-plugin-markdown": "*",
"eslint-plugin-react": "^6.3.0",
"eslint-tinker": "^0.3.2",
"pre-commit": "^1.2.2"
},
"dependencies": {
"chalk": "^1.1.3",
"child_process": "^1.0.2",
"commander": "^2.9.0",
"prompt": "^1.0.0"
},
"engines": {
"install-node": "7.6.0"
},
"pre-commit": [
"pre-commit"
],
"bin": {
"any": "./bin/any"
},
"license": "ISC"
}复制代码
- 字段bin下面配置被当做命令行可执行命令。指向/bin下面的any文件。
- 字段engines用来当前目录安装7.6.0版本node,可直接使用async函数而无需要再使用co模块。
pre-commit用来做提交前代码检查,运行pre-commit脚本,也就是eslint。
在根目录下建立/bin 文件夹,创建any文件(无后缀名)。这个 /bin/any是整个脚手架的入口文件,所以我们首先对它进行编写。
# !/usr/bin/env node
const add = require('../src/command/add')
const list = require('../src/command/list')
const init = require('../src/command/init')
const del = require('../src/command/del')
const program = require('commander')
const { version } = require('../package')
// 定义当前版本
program
.version(version)
program.parse(process.argv)
if (!program.args.length) {
program.help()
}复制代码
运行npm link,把当前项目链接到全局。这样就可以直接在命令行使用any命令测试/bin/any下面的代码
如果没有权限,请自行百度,使用chmod 777为usr/local目录添加权限复制代码
any-cli@npm link
any-cli@any复制代码
我们继续在/bin/any中添加代码
// 定义使用方法
program
.command('add')
.description('add template')
.alias('a')
.action(add)
program
.command('del')
.description('Delete a template')
.alias('d')
.action(del)
program
.command('list')
.description('List all the templates')
.alias('l')
.action(list)
program
.command('init')
.description('Generate a new project')
.alias('i')
.action(init)复制代码
command用来配置any命令的参数,alias配置缩写,action配置运行什么函数。其他就不用多说了吧,程序员你懂的。
commander 的具体使用方法在这里就不展开了,可以直接到 [官网][2] 去看详细的文档。复制代码
使用any命令,看到输出如下,证明入口文件已经编写完成了。
Usage: any [options] [command]
Commands:
add|a add template
del|d Delete a template
list|l List all the templates
init|i Generate a new project
Options:
-h, --help output usage information
-V, --version output the version number复制代码
接着,我们创建src/command目录,下面分别创建刚才的4个参数所对应的文件。文件内容是具体业务代码(分别对应增删查初始化),在此不做介绍。请参考github链接。代码使用了函数式编程,需要有点函数式基础。