
三分钟打造七夕专属的插件化脚手架
背景
七夕节将至,你是否还因没有找到合适的表白机会而苦恼,还是说在纠结于为伴侣挑选合适的情人节礼物。那么今天你来对地方了。相信在读完这篇文章后,你就可以自己动手打造出一个专属于他/她/它的七夕专属插件化脚手架,通过本篇文章,不仅可以轻松拉近你与你爱人的距离,还能顺便学会插件化脚手架的相关知识。
温馨提醒
本篇文章需要一定的命令行知识,若在阅读本篇文章时有任何的疑惑,可以通过自行搜索相关内容或者阅读以下的文章来解惑:
https://aotu.io/notes/2016/08/09/command-line-development/index.html
废话不多说,直接进入正题
项目目录结构
1 | . |
编写插件化脚手架项目代码
新建七夕项目
- 新建一个名为
valentine
的空目录并进入该目录,通过执行yarn init -y
初始化目录(没安装yarn的需要安装一下yarn),同时保证node版本>=10
。 - 由于这个项目不仅有我们的核心脚手架,还存在着一些“用于表明心意”的插件,因此我们将使用
monorepo
的仓库结构,并安装lerna
来进行仓库的管理,这里使用lerna
是因为lerna
能对多个packages
进行统一的版本的管理。在目录下执行yarn add --dev lerna
。 在目录下新建
lerna.json
文件,对lerna进行以下配置:1
2
3
4
5
6
7
8{
"packages": [
"packages/*"
],
"version": "0.0.1",
"npmClient": "yarn",
"useWorkspaces": true
}在项目根目录的
package.json
下添加以下配置:1
2
3
4
5
6{
"private": true,
"workspaces": [
"packages/*"
]
}在项目的根目录下新建一个名为
packages
的文件夹,里面用来存放我们的核心脚手架以及插件的package。
all right,万事俱备~
初始化脚手架package目录
- 进入
packages
文件夹,新建一个名为cli
的文件夹,我们主要在这个文件夹内,对我们的脚手架核心逻辑进行编写。 进入到
cli
文件夹内,新建package.json
文件,添加如下内容:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19{
"name": "@o2team/valentine-cli",
"version": "0.0.1",
"main": "index.js",
"license": "MIT",
"bin": {
"valentine": "./bin/valentine"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"description": "",
"dependencies": {
"chalk": "^4.1.0",
"commander": "^5.1.0",
"tapable": "^1.1.3"
}
}在
cli
文件夹内新建bin
文件夹,并进入bin
文件夹内新建valentine
文件,通过chmod +x ./valentine
为其添加可执行权限,并在文件内写入简单的代码:1
2
console.log('-------- 情人节快乐 --------')在项目根目录下打开终端,运行
./packages/cli/bin/valentine
,顺利的话,你将在终端看到“情人节快乐”。
完善脚手架核心逻辑
当然,只能打印出一个如此简单的祝福,是完全不能达不到我们开始的预期的,甚至不能称得上是一个脚手架。
不过不要着急,接下来,容我先稍微介绍一下插件化脚手架的要点,并在接下来的文章中对这些要点进行实现。
插件化的核心要点
一般来说,要实现插件化,我们需要关心以下三点:
- 插件的安装和卸载
- 插件的获取和管理
- 插件间的通信
而由于我们目前需要插件化的是脚手架,因此我们可以通过项目依赖的方式来实现插件的安装和卸载,而脚手架本身只需要在它执行命令的项目的依赖内寻找需要加载的插件即可。
最后valentine
内的大致逻辑应变为:
1 |
|
编写获取插件逻辑
接下来,我们去实现getAllCommands
的逻辑:
- 首先我们在
cli
文件夹内新建一个名为api
的文件夹,用于在里面存放一些获取和加载插件的逻辑,并在api
文件夹内新建commandAPI.js
文件。 - 在
commandAPI.js
文件内实现getAllCommands
的逻辑:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27const fs = require('fs')
const path = require('path')
// 获取所有命令行命令,包括预设的以及插件的
module.exports.getAllCommands = () => {
const cwdFns = []
const localCwdPath = path.join(__dirname, '..', 'commands')
const localCwdNames = [...fs.readdirSync(localCwdPath)]
localCwdNames.forEach(name => {
const cwdPath = path.join(localCwdPath, name)
cwdFns.push(require(cwdPath))
})
const { getAllPluginIdOfPackageJson } = require('./share-utils')
getAllPluginIdOfPackageJson().forEach(name => {
const command = path.join(process.cwd(), 'node_modules', name, 'command.config.js')
try {
const cwd = require(command)
cwdFns.push(cwd)
} catch (error) {
console.log(`${command} 不存在`)
}
})
return cwdFns
}
在阅读上述代码的时候,你也许会有几点疑问:
localCwd
是什么?为什么需要获取它?localCwd
是脚手架除了插件外原本所包含的一些命令功能,为了保证引入的一致性,因此它与插件的结构本质上是相同的,所以会在获取插件命令的时候一并获取。share-utils
文件所导出的函数做了什么?是如何实现的?share-utils
所导出的getAllPluginIdOfPackageJson
函数主要是利用正则来匹配当前项目下符合插件命名的依赖,并把这些依赖整合导出,供脚手架使用。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const fs = require('fs')
const path = require('path')
const pkPluginRE = /^(@o2team\/)valentine-plugin-/
exports.pkPluginRE = pkPluginRE
exports.getAllPluginIdOfPackageJson = () => {
const pkgJsonPath = path.join(process.cwd(), 'package.json')
const deps = {}
const plugins = []
if (fs.existsSync(pkgJsonPath)) {
const pkg = require(pkgJsonPath)
Object.assign(deps, pkg.devDependencies || {}, pkg.dependencies || {})
Object.keys(deps).forEach(dep => {
pkPluginRE.test(dep) && plugins.push(dep)
})
}
return plugins
}这个
getAllCommands
函数的整体逻辑是怎么样的?getAllCommands
的其实一共做了三件事情:一,获取脚手架内置的命令功能;
二,匹配当前项目下符合插件命名的依赖,对这些依赖进行整合并导出;
三,遍历这些插件依赖,与内置的命令功能一起,将它们的注册函数
cwd
导入到一个数组内,并将该数组导出。
编写注册插件和解析命令逻辑
至此,我们的脚手架已经可以拿到与当前项目有关的所有插件的注册函数了,接下来我们只需要给这些注册函数传入我们的注册命令以及相关帮助函数,并在注册完成后对终端输入的命令进行解析,那么这个七夕专属的插件化脚手架就基本完成了。
同样的,我们需要改写一下cli/bin/
目录下的valentine
文件,改写内容如下:
1 |
|
在commandAPI.js
文件内添加injectCommand
函数和commandComplete
函数,这两个函数的逻辑并不复杂,相信读者阅读一次就能轻松理解:
1 | const fs = require('fs') |
编写内置插件
至此,我们的插件化脚手架已经可以投入使用了,让我们来试着写一个内置的插件,在cli
目录下,新建一个commands
文件夹,在里面新建一个happy.js
,写入如下代码:
1 | module.exports = ({ injectCommand, operateHooks }) => { |
然后我们在cli
目录下启动终端,并运行./bin/valentine happy
,你将看到如下的输出:
编写非内置插件
接着,我们将新建一个非内置的插件,并随后讲解插件间是如何做到通信的。
首先,我们需要新建一个package,即进入到packages
目录,新建一个confession
文件夹,进入confession
文件夹,新建package.json
文件,和cli类似的写入以下内容:
1 | { |
在这里需要注意,package.json
里的name
字段可以是自定义的,但一定要和之前脚手架的share-utils
内定义的正则相匹配,以便被脚手架获取插件时识别。
之后,新建一个名为command.config.js
的文件,同样的,写入注册函数的内容:
1 | module.exports = ({ injectCommand }) => { |
一个“情人节表白”插件就这样完成了,接着我们将这两个package都上传至npm
,并安装到一个新的项目中,在项目下执行./node_modules/.bin/valentine love
,便能看到confession
插件命令被执行了:
完成插件间的通讯
接下来,我们希望每次valentine happy
命令被执行时,能先执行插件valentine love
命令,这个时候,我们就需要往我们的插件化脚手架中加入组件的通信机制了。
在这里,我们会使用tapable
来实现插件间的通信,tapable
是一个类似于Node.js
中的EventEmitter
的库,但更专注于自定义事件的触发和处理。具体的用法希望读者可以自行搜索,这里就不多介绍。
关于tapable的使用,有兴趣的同学可以戳这里了解一下:
我们在api
目录下新建一个名为operateHooks
的js文件,在文件内写入以下内容:
1 | const { AsyncSeriesHook } = require('tapable') |
之后,在commandAPI
中,对OperateHooks
类进行实例化,并在commandComplete
执行operateHooks
实例的bindHooks
方法,最后导出该实例。
1 | const operateHooks = new OperateHooks() |
在valentine
文件中引入该实例,在进行插件命令注册时将该实例作为参数传入。
1 |
|
最后分别在happy.js
和confession/command.config.js
对operateHooks
实例进行对应钩子的创建和绑定即可:
1 | // happy.js |
1 | // confession/command.config.js |
待优化项
目前这个插件化脚手架还存在着一些问题和可优化点:
- 插件的获取是通过正则匹配来进行的,这样的做法在依赖较多的仓库中效率会非常低下。
- 目前插件的获取形式在遇到
monorepo
形态的项目时,会引发项目跟目录和命令执行目录不一致的问题。 - 目前插件只支持项目插件,缺少了全局插件的支持。
这些优化项的可实现方法很多,由于考虑到篇幅问题,希望读者可以自己去思考,然后自行解决和优化。
最后
但是,不管怎么说,一个七夕专属的插件化脚手架可以说已经完成了,最终效果: