tplkit是一个模板管理工具,能够帮助你快速地制作可配置的模板,并在初始化时进行便捷的差异化订制。
全局安装:
npm install tplkit -g
使用tplkit -V
命令检查安装是否成功:
tplkit -V
命令 | 含义 |
---|---|
init | 初始化一个项目 |
config | 获取tplkit 的当前配置 |
set <option> <value> | 配置tplkit |
reset <option> | 重置配置项 |
输入tplkit init
回车之后,会有一段基础配置的会话,包括:
- Project name:项目名,即最终生成的项目的文件夹名
- Template type:模板类型,即模板目录下存放的模板,选择其中一种即可根据该模板来生成项目
完成以上会话以后,进入模板的配置工作,在还没有进行配置之前,tplkit
只有一种模板类型,也就是demo
,我们选择demo之后,将会进入到模板的配置会话里,如下:
$ tplkit init
? Project name: test_tplkit
? Template type: demo
? Name: demo
? Description: a demo template.
? Author: Jack Lo
? Version: 1.0.0
🎉 Copy template successfully.
🎉 Replace template successfully.
🎉 All done, have a nice working day!
以上过程,从? Name:
开始便是demo
的相关配置内容,这个是由demo
目录下的tplkit.config.js
文件来设置的,也就是说,你可以通过模板配置文件来获取你需要的用户输入数据。
完成以上工作后,在当前目录下,会生成一个与Project name
的输入值对应的项目,这里是test_tplkit
,打开看到package.json
,我们可以看到前面输入的Name
、Description
、Author
、Version
都会对应出现在相关字段里:
{
"name": "demo",
"version": "1.0.0",
"description": "a demo template.",
"main": "index.js",
"author": "Jack Lo",
"license": "MIT"
}
不仅仅是package.json
,项目下的任何文件都可以被修改,只要你在tplkit.config.js
中配置了相关内容,这一块我们后面会介绍,感兴趣的可以先看看test_tplkit/tplkit.config.js
。
这就是init
的过程,根据简单的用户输入快速生成一个项目。
获取配置信息:
$ tplkit config
🎉 Config list:
{
"tplPath": null
}
配置信息是由默认配置信息和用户配置信息两部分merge而来的,所以对于同一配置项,用户配置会覆盖默认配置,否则默认是默认配置信息:
- tplPath:即模板的存放目录,默认使用
tplkit
所在目录下的templates
目录
设置用户配置信息:
$ tplkit set tplPath ./templates
🎉 Set "tplPath" to "/Users/jack/Desktop/develop/templates" successfully.
set后面跟两个参数:option
与value
,如上,我们设置了tplPath
为当前目录(process.cwd()
)下的./templates
,则之后的模板寻找都会在这个目录下进行,现在我们新建一个目录templates
,在templates
下继续新建两个目录a
、b
:
- templates
- a
- a.js
- b
- b.js
现在在试试执行tplkit init
:
? Project name: test_tplkit
? Template type: a
🙈 A config file in "/Users/jack/Desktop/develop/templates/a" is missing.
🎉 Copy template successfully.
🎉 All done, have a nice working day!
你会发现Template type
项有了a
和b
两种模板类型了,同时生成的test_tplkit
的结构与我们新建的模板a
的结构保持一致,因为test_tplkit
就是copy了a
。
注意:这里会提示我们没有找到
tplkit.config.js
文件,因为我们还没有做相关的配置,而即便没有配置,也不影响其运行,默认copy整个模板。
有了set
来设置用户配置,我们可能还需要一个重置功能,将用户配置清除,恢复到默认配置:
$ tplkit reset tplPath
🎉 Reset "tplPath" successfully.
或者直接清除全部用户配置:
$ tplkit reset all
🎉 Reset all options successfully.
在讲到set
的时候,我们已经有涉及到一部分内容,基本流程就是:
- 设置
tplPath
模板路径 - 在模板目录下新建模板,假设是
a
- 在
a
的根目录下新建模板配置文件tplkit.config.js
,并编辑相关配置内容 - 开始
a
的模板开发工作
这里我们着重讲解一下tplkit.config.js
的内容,其他步骤都比较简单,没什么可讲的。
而事实上tplkit.config.js
的内容也很简单,我们看一下demo
的:
module.exports = {
questions (anws) {
return [
{
type: 'input',
name: 'name',
message: 'Name:',
default: 'demo'
},
{
type: 'input',
name: 'description',
message: 'Description:',
default: 'a demo template.'
},
{
type: 'input',
name: 'author',
message: 'Author:',
default: 'Jack Lo'
},
{
type: 'input',
name: 'version',
message: 'Version:',
default: '1.0.0'
}
]
},
replace: [
{
file: './package.json',
parser (cnt, args) {
return cnt
.replace('"name": "demo"', `"name": "${args.name}"`)
.replace('"description": "a demo template."', `"description": "${args.description}"`)
.replace('"author": "Jack Lo"', `"author": "${args.author}"`)
.replace('"version": "1.0.0"', `"version": "${args.version}"`)
}
}
],
include: ['**/**'],
exclude: ['node_modules/**']
}
分为四部分来看:
会话数组,表示希望通过用户的输入得到的信息,具体参数设置请参考:inquirer。
替换数组,也就是需要替换的内容,比如我们之前演示demo
的时候,根据用户输入的内容,来替换package.json
里的相应内容。
replace的一个item分为两个部分:
- file:需要替换的文件
- parser:替换的函数,接受两个参数
cnt
和args
,cnt
是根据file
来读取的文本内容,你可以对其进行处理,最后return一个新的文本内容,完成替换;而args
则是由会话得到的结果对象,这包括基础会话得到的结果和由设置的questions
得到的结果的集合
补充一下,基础会话的结果对应会话题目的驼峰变量,比如Project name
对应args.projectName
,Template type
对应args.templateType
,以此类推,而questions
是由模板开发者自己配置的,不强制按此规则执行。
需要被copy到项目里的文件模式,这里我们用到了glob,include对应glob的pattern,而exclude则对应glob的options.ignore,具体可以查看它的文档。
有一点不同的是,include是一个数组,而glob的pattern规定是一个字符串,这是由于我们对其进行了功能扩展,使include支持数组的方式,这是为了满足include多个目录或者文件的情况。
使用tplkit init
还可以补充一些参数,--force
表示如果存在同名的项目名称,则直接覆盖,如果不加这个参数,遇到存在同名项目的情况下,初始化会取消,直到你删除了这个同名目录:
$ tplkit init
? Project name: test_tplkit
? Template type: demo
🚨 Directory "test_tplkit" exists.
--detail
表示打印详细信息:
$ tplkit init --detail
? Project name: test_tplkit
? Template type: demo
? Name: demo
? Description: a demo template.
? Author: Jack Lo
? Version: 1.0.0
🐝 Start copying:
"/Users/jack/Desktop/develop/templates/demo/.gitignore"
✨ Finish copying.
🐝 Start copying:
"/Users/jack/Desktop/develop/templates/demo/tplkit.config.js"
✨ Finish copying.
🐝 Start copying:
"/Users/jack/Desktop/develop/templates/demo/package.json"
✨ Finish copying.
🐝 Start copying:
"/Users/jack/Desktop/develop/templates/demo/src/index.js"
✨ Finish copying.
🎉 Copy template successfully.
🐝 Start replacing:
"/Users/jack/Desktop/develop/test_tplkit/package.json"
✨ Finish replacing
🎉 Replace template successfully.
🎉 All done, have a nice working day!