手写一个合格的前端脚手架

为什么我们需要一套脚手架

为什么我们需要一套脚手架，它能帮助我们解决哪些痛点问题。

•前端项目配置越来越繁琐、耗时，重复无意义的工作•项目结构不统一、不规范•前端项目类型繁多，不同项目不同配置，管理成本高•脚手架也可以是一套命令集，不只用来创建项目

那么为什么不用一些开源框架自身的 CLI 工具，需要自己开发呢，这里仁者见仁智者见智，我个人建议就是对于中型团队以上需要自己维护一套脚手架，因为可控性高，能满足团队特定需求的研发。

如何按照开源要求开发一个前端脚手架？

下面是我们常见的前端开源目录结构 null

脚手架的设计

思路

•解耦：脚手架与模板分离•脚手架负责构建流程，通过命令行与用户交互，获取项目信息•模板负责统一项目结构、工作流程、依赖项管理•脚手架需要检测模板的版本是否有更新，支持模板的删除与新建•……

流程图

null

代码讲解

目录结构

null

配置 Git hook

首先进行开发前的准备工作，来保证你代码的质量。

Husky + Lint-staged

通过 Git hook 完成 commitlint、ESLint、prettiter 等，具体配置我后面会给源码，有兴趣的可以自己搜索下。

// package.json
"husky": {"hooks": {"pre-commit": "lint-staged","commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},"lint-staged": {"**/*.js": ["eslint --fix","prettier --write","git add"]}

package.json 下的 bin 字段

bin：配置内部命令对应的可执行文件位置，配置命令后，npm 会寻找到对应的可执行文件，然后在 node_modules/.bin 目录下建立对应的符号链接。

由于 node_modules/.bin 会在运行时候加入到系统的环境变量，因此我们可以通过 npm 调用命令来执行脚本。

所有 node_modules/.bin 目录下的命令都可以通过 npm run [命令] 执行。

所以我们需要在 package.json 配置入口

"bin": {"easy": "bin/easy.js"}

npm link 本地调试

这里介绍下开发脚手架的调试方法。npm link 官网使用介绍。使用方法：

// cd 到你项目的bin目录(脚本)下
$ npm link

去掉 link 也非常方便：

npm unlink linkname

bin 目录下的入口文件

#!/usr/bin/env nodeconst program = require('commander'); // 命令行工具
const chalk = require('chalk'); // 命令行输出美化
const didYouMean = require('didyoumean'); // 简易的智能匹配引擎
const semver = require('semver'); // npm的语义版本包
const enhanceErrorMessages = require('../lib/util/enhanceErrorMessages.js');
const requiredNodeVersion = require('../package.json').engines.node;didYouMean.threshold = 0.6;function checkNodeVersion(wanted, cliName) {// 检测node版本是否符合要求范围if (!semver.satisfies(process.version, wanted)) {console.log(chalk.red('You are using Node ' +process.version +', but this version of ' +cliName +' requires Node ' +wanted +'.\nPlease upgrade your Node version.'));// 退出进程process.exit(1);}
}// 检测node版本
checkNodeVersion(requiredNodeVersion, '@easy/cli');program.version(require('../package').version, '-v, --version') // 版本.usage('<command> [options]'); // 使用信息// 初始化项目模板
program.command('create <template-name> <project-name>').description('create a new project from a template').action((templateName, projectName, cmd) => {// 输入参数校验validateArgsLen(process.argv.length, 5);require('../lib/easy-create')(lowercase(templateName), projectName);});// 添加一个项目模板
program.command('add <template-name> <git-repo-address>').description('add a project template').action((templateName, gitRepoAddress, cmd) => {validateArgsLen(process.argv.length, 5);require('../lib/add-template')(lowercase(templateName), gitRepoAddress);});// 列出支持的项目模板
program.command('list').description('list all available project template').action(cmd => {validateArgsLen(process.argv.length, 3);require('../lib/list-template')();});// 删除一个项目模板
program.command('delete <template-name>').description('delete a project template').action((templateName, cmd) => {validateArgsLen(process.argv.length, 4);require('../lib/delete-template')(templateName);});// 处理非法命令
program.arguments('<command>').action(cmd => {// 不退出输出帮助信息program.outputHelp();console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`));console.log();suggestCommands(cmd);
});// 重写commander某些事件
enhanceErrorMessages('missingArgument', argsName => {return `Missing required argument ${chalk.yellow(`<${argsName}>`)}`;
});program.parse(process.argv); // 把命令行参数传给commander解析// 输入easy显示帮助信息
if (!process.argv.slice(2).length) {program.outputHelp();
}// easy支持的命令
function suggestCommands(cmd) {const avaliableCommands = program.commands.map(cmd => {return cmd._name;});// 简易智能匹配用户命令const suggestion = didYouMean(cmd, avaliableCommands);if (suggestion) {console.log(`  ` + chalk.red(`Did you mean ${chalk.yellow(suggestion)}?`));}
}function lowercase(str) {return str.toLocaleLowerCase();
}function validateArgsLen(argvLen, maxArgvLens) {if (argvLen > maxArgvLens) {console.log(chalk.yellow('\n Info: You provided more than argument. the rest are ignored.'));}
}

其他代码就不贴了我会给出源码链接，下面分享一下几个有意思的点。建议大家有兴趣的跟着敲一遍，有很多小细节需要注意。

发布脚本

// script/release.jsconst { execSync } = require('child_process');
const semver = require('semver');
const inquirer = require('inquirer');const currentVerison = require('../package.json').version;const release = async () => {console.log(`Current easy cli version is ${currentVerison}`);const releaseActions = ['patch', 'minor', 'major'];const versions = {};// 生成预发布版本标示releaseActions.map(r => (versions[r] = semver.inc(currentVerison, r)));const releaseChoices = releaseActions.map(r => ({name: `${r} (${versions[r]})`,value: r}));// 选择发布方式const { release } = await inquirer.prompt([{name: 'release',message: 'Select a release type',type: 'list',choices: [...releaseChoices]}]);// 优先自定义版本const version = versions[release];// 二次确认发布const { yes } = await inquirer.prompt([{name: 'yes',message: `Confirm releasing ${version}`,type: 'confirm'}]);if (yes) {execSync(`standard-version -r ${release}`, {stdio: 'inherit'});}
};release().catch(err => {console.error(err);process.exit(1);
});

npm version 与 tag

官网关于 npm version 的介绍：

https://docs.npmjs.com/cli/version.html

如果不熟悉 Node 语义化版本可以阅读:

https://semver.org/lang/zh-CN/

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]'npm [-v | --version]' to print npm version
'npm view <pkg> version' to view a package's published version
'npm ls' to inspect current package/dependency versions

null

其实我们自己使用 npn publish，最终执行的还是 npm version 下命令。

官网关于 npm-dist-tag 的介绍：

npm-dist-tag^[1]

npm install <name>@<tag>
npm install --tag <tag>

npm 也有 tag 的概念，一般情况下我们不会指定 tag，这个时候默认使用的就是 latest 这个 tag，所有的发布与安装都是最新的正式版本，如果指定 tag 之后，我们可以在这个 tag 上发布一个新的版本，用户安装时候也可以指定这个 tag 来进行安装，你可以简单理解 tag 类型 git 中的 branch。

常用的一些关于 tag 的命令：

# 查看当前的tag和对应的version。
npm dist-tag ls# 查看my-package发布过的所有版本号。
npm view my-package versions# 给my-package设置tag，对应到版本version。
npm dist-tag add my-package@version tag

如果一不小心把测试版发布成了正式版？发布之前我们是这样的：

latest: 1.0.0
next: 1.0.0-alpha.0

错误的把 1.0.0-alpha.1 直接 npm publish：

latest: 1.0.0-alpha.1
next: 1.0.0-alpha.0

解决方法：

# 把原来的1.0.0设置成最新的正式版
$ npm dist-tag add my-package@1.0.0 latest# 把1.0.0-alpha.1更新到最新的测试版
$ npm dist-tag add my-package@1.0.0-alpha.1 next

npm publish 一个包

1.创建一个 npm 账户2.cd 到你需要发布的 repo 仓库下, 记得切换到 npm 源（或者公司内网自建源）3.npm login，需要输入用户名、密码、邮箱4.npm publish

集成 CI（Travis CI）自动发布

每次手动发布太 low 了，要是可以自动发布就好了。

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。它绑定 GitHub/GitLab 等上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。

持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码“集成”到主干。

简单理解就是：它的作用是自动帮你做好从代码测试到发布的一系列流程，配合版本控制使用的话可以设置成每一次 push 都自动进行一次集成，保证代码的正确性。

注意现在 GitHub 也出了集成工具，感兴趣的可以去体验下。

如果你的项目是在 GitHub 并且是开源的，推荐使用这个 org^[2]。

使用 GitHub 进行登录 Travis CI，完成一些授权工作，Travis CI 才能监听到你的 GitHub 项目代码的变化。

Travis CI 要求你项目的根目录必须有一个配置文件 .travis.yml 文件，这是一个配置文件，指定 travis 的行为，该文件还必须保存在 GitHub 的仓库。一旦有新的 push，travis 就会找到这个文件进行执行。

关于 travis 更多使用推荐阅读官网^[3]，这里主要讲下利用 travis 自动发布包到 npm^[4]，Continuous Integration environments^[5]。

下面是一个 .travis.yml 配置文件：

language: node_js
node_js:- '8'
cache:directories:- node_modules
install:- npm install
script:- npm run lint
deploy:provider: npmemail: "$NPM_EMAIL"api_key: "$AUTH_TOKEN"skip_cleanup: trueon:branch: master
# after_success:

然后在你的 travis 上选择需要开启 CI 的项目。

null 配置对应环境变量到该仓库下如：

null

环境变量名格式必须为“大写字母_大写字母”格式。

token 生成也非常简单，官网^[6]介绍，可以直接在你的 npm 账户下的 tokens 页面手动生成或者通过 npm 命令行生成。

# 切换到npm源下, 登陆npm
npm login# 生成token, npm可以指定生成token的权限(只读或者可读可写)
npm token create

然后配置一些脚本来执行 npm version，这样当你包版本有更新后 push 到 GitHub repo，就会触发 travis 自动发包到 npm。

DEMO

源码链接^[7]

末尾

你好，我是若川，江湖人称菜如若川，历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

关注若川视野，回复"pdf" 领取优质前端书籍pdf，回复"1"，可加群长期交流学习
我的博客地址：https://lxchuan12.gitee.io 欢迎收藏
觉得文章不错，可以点个在看呀^_^另外欢迎留言交流～

精选前端好文，伴你不断成长

若川原创文章精选!可点击

小提醒：若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮，欢迎点击阅读，也可以星标我的公众号，便于查找