从零开始搭建一个自己的脚手架工具并发布

从零开发自己的脚手架工具

初始化项目结构

mkdir name-cli # 名称自定义
cd name-cli # 进入文件夹
npm init # 初始化 package.json

指定入口文件

• 在 package.json 中添加 bin 字段

{
	"bin": "cli.js"
}

创建并完善入口文件cli.js

• 在根目录下创建入口文件 cli.js

该文件第一行必须为下面这行注释

#! /usr/bin/env node

先捋清思路，在创建一个cli应用的时候，我们需要在命令行询问一些基础问题，还需要对文件进行操作（拿到模版文件，输出到指定位置），所以我们需要用到 inquirer、fs、path、ejs模块
fs 和 path 在node中内置的有，所以只需安装 inquirer 和 ejs 模块即可

npm install inquirer
npm install ejs

• 在 cli.js 中引入相应模块

const fs = require('fs') // 操作文件
const path = require('path') // 获取拼接路径用
const inquirer = require('inquirer') // 命令行询问问题
const ejs = require('ejs') // 模版引擎

• 设置命令行问题

inquirer.prompt([
	{
        type: 'input',
        name: 'name',
        message: 'project name?',
        default: 'default-project-name'
    },
]).then(anwsers => {
	// anwsers 可以拿到用户输入的内容，是一个对象，key值为上面的name属性设置的值
	...
})

• 操作文件
  在项目根目录再创建一个 templates 文件夹，用来存放模版文件
  例如创建了templates/demo.js文件

// 在上面的 .then 中继续书写
const tmplDir = path.join(__dirname, 'templates') // 找到模版文件路径
// 读取该文件夹
fs.readdir(tmplDir, (err, files) => {
	// 循环遍历，拿到 file 为文件名称
	files.forEach(file => {
		// 使用 ejs 解析模版，获取解析后文件内容
		ejs.renderFile(path.jsoin(tmplDir, file), anwsers, (err, result) => {
			// 写入输出文件 -- 在命令行对应的路径输出文件
			fs.writeFileSync(file, result)
		})
	})
})

Tips:

fs.writeFileSync 不会创建文件夹
真实场景的模版文件中也不会只有单文件，会存在多级嵌套的情况

所以我们需要对这段代码重新改造

• 当模版文件为多级嵌套的情况

// 将模版文件中的路径（相对路径），手动写入到数组中
cosnt templates = [
	'demo.js',
	'src/a.js'
	'src/b/b.js'
] // 假如有这么几个文件
// 在 .then 中就应该换成以下写法
templates.forEach(item => {
	const outputDir = path.join(anwser.name, item) // 输出路径-拼接前面用户输入的项目名
	// 这里需要递归调用 fs.mkdir 去创建目录
	if (!fs.existsSync(outputDir)) {
		// 只有当没有此目录文件的时候才去创建
		let dirpath = ''
		const paths = outputDir.split('/')
		paths.forEach(p => {
			dirpath = dirpath ? path.join(dirpath, p) : p
			if(paths[paths.length - 1] === p) {
				// 这里为文件，不是文件夹了
				const [first, ...files] = dirname.split('/')
				ejs.renderFile(path.join(tmplDir, files.join('/')), anwsers, (e, result) => {
                if (e) throw e
                // 写入文件
                fs.writeFileSync(dirname, result)
            })
			} else {
				// 这里输出的都为文件夹
				if(!fs.existsSync(dirname)) {
					// 如果没有此目录则创建文件夹
					fs.mkdirSync(dirname)
				}
			}
		})
	}
})

本地测试

npm link
# or
yarn link

重新找一个文件夹打开命令行输入 name-cli，即可生成项目

# 解绑
npm unlink
# or
yarn unlink

发布到npm

• 需要将 npm 源修改回官方源

npm get registry # 查看当前源
npm config set registry https://registry.npmjs.org/ # 设置为npm官方源
npm config set registry http://registry.npm.taobao.org # 设置淘宝镜像

• 登陆发布

npm login # 登陆
npm publish # 发布

正式测试

# 全局安装自己的脚手架工具
npm install -g name-cli
# 切换到对应目录
cd xxx
# 运行
name-cli # 不出问题，项目就生成了

还有很多地方需要优化，后续再更新

未完待续…