前言
有了之前的基础（前端如何搭建一个简单的脚手架），我们现在可以讲讲一个成熟的脚手架是怎么做了。
这里我们参考vue-cli的源码，基于rollup和typescript一步步搭建。vue-cli作为vue的脚手架，给如此多的前端开发者使用，已经算是成熟了吧。
开始
以下我们的命令仍然是ds~，模板是ds-cli-lib-template
目录结构
├─ bin # 打包文件目录
│ ├─ ds.js # package.json里的bin字段引用文件
├─ src
│ ├─ lib # 具体命令目录
│ ├─ list # ds list
│ ├─ init # ds init
│ ├─ utils # 工具函数
├─ main.ts # 入口文件
├─ typings # typescript类型文件目录
├─ rullup.config.js # rollpu构建配置
├── test # 测试用例
复制代码编写构建配置
现如今，webpack用来开发应用（热更新hmr,代码拆分等）,rollup用来开发类库（简单易上手，打包后代码能读懂，至于其他的特性webpack目前基本已支持）。
现在来明确我们的需求
- 使用typescript编写模块代码
- 打包成umd模块规范的代码
- 可以引用commonjs规范的包（因为历史原因，大多数包都不是ES模块规范）
- 压缩打包代码，减少体积
//rollup.config.js
import typescript from "rollup-plugin-typescript2";
import commonjs from 'rollup-plugin-commonjs'
import { uglify } from 'rollup-plugin-uglify'
export default {
//入口文件
input: "src/main.ts",
output: [
{
banner: "#!/usr/bin/env node",
/**
* 头部插入这段代码
* */
name: "ds",
file: "bin/ds.js",
//打包成umd模块规范
format: "umd"
}
],
plugins: [
typescript(),
commonjs({
include: "node_modules/**",
extensions: ['.js', '.ts']
}),
uglify()
],
};
复制代码npm脚本命令("scripts"字段)
{
"clean": "rm -rf ./bin && mkdir bin",
"build": "npm run clean && rollup --config"
}
复制代码编写入口文件
是一些非常基础的东西，我们一般不放很复杂的逻辑在入口文件里。
const cmd = require('commander');
const config = require('../package.json');
//这里cli-init.ts和cli-list.ts我们可以简单导出一个函数，如
// export default function(...args) {
// console.log('init')
// }
import init from './lib/init/cli-init';
import list from './lib/list/cli-list';
const command= {
init,
list
};
//map对应的type，从而执行
function exec(type, ...args) {
config.debug = args[0].debug;
command[type](...args);
}
cmd
.usage('' )
.version(config.version)
.description('欢迎使用ds-cli');
cmd
.command('init')
.description('初始化组件模板')
.action((...args) => exec('init', ...args));
cmd
.command('list')
.description('查看线上组件模板')
.action((...args) => exec('list', ...args));
cmd.command('help')
.description('查看帮助')
.action(() => cmd.help());
// 解析输入的参数
cmd.parse(process.argv);
if (!cmd.args.length) {
cmd.help();
}
复制代码我们打包(执行npm run build)到bin文件夹下后，配置一下package.json的bin字段为bin/ds.js，然后发布npm(参考快速发布一个vue-fullpage组件到npm试一下命令。
如果失败，请重新审视上述之流程。
初始化模板
我们对模板的要求
- 文件目录必须含有template文件夹，并且所需模板文件放在该目录下
- 可用meta.js提高自定义程度（所谓动态化模板）
- 模板文件名命名规范是ds-cli-‘name’-template，方便脚手架拉取
- 可以不用线上的模板，如果本地有模板，可直接用之。如果是线上模板，那么应该先下载到本地用户目录的.ds-templates目录下（~/.ds-templates）
期望命令
ds init #模板名字和应用名字
复制代码 流程与逻辑
if(当前目录下构建){
询问一下是不是当前目录,是的话进入run函数
}else{
进入主流程run函数
}
//run函数
function run(){
if(模板路径是本地文件路径){
//支持本地模板如ds init /usr/webpack test
if(路径存在){
//动态构造模板到你的目录如test
generate()
}else{
//报错日志
}
}else{
//1.检查当前process的node版本，大于6才可以用
//2.检查当前package.json的版本，跟远程仓库的版本比较一下。如果不一样,就提醒一下用户有新版本
//3.下载远程仓库到本地(本地一般存放用户目录里的.ds-template文件夹下)，然后执行generate函数
}
}
复制代码动态模板
大家也看到了，其实最重要的就是generate函数~
- 而如果我们去掉这一步generate模板的话，其实就是相当于下载一个静态模板，如果我们对于用户自定义没要求的话，其实可以跳过这一步。
- generate函数里面用到了metalsmith，这个就相当于我们之前用的gulp，通过不断地编写中间件来优化打包后的结果。
function generate(){
const opts = getOptions(name, templatePath) as meta; // 获取meta.js配置,存到opts里
// 我们把所需文件放在源文件的template目录下，其他一些如测试放在外面。初始化一下metalsmith
const metalsmith = Metalsmith(path.join(templatePath, 'template')) //我们约定，将模板所有文件放在ds-cli-lib-template/template里
//中间件
metalsmith.use(askQuestions(opts.prompts)) // 询问问题，将信息存metalsmith.metadata()
.use(filterFiles(opts.filters)) // 通过问题交互过滤掉不需要的文件
.use(renderTemplateFiles()); // 模板里面可以使用handlebar语法，作为占位符，我们这里重新渲染模板文件
// 源目录打包到目标目录to
metalsmith.clean(false)
.source('.')
.destination(to)
.build((err, files) => {
done(err);
});
}
复制代码- 我们在模板（如 ds-cli-lib-template）目录下需要构造meta.js，自定义我们所需的字段
module.exports={
//会通过中间件把这些字段存在metalsmith.metadata()，方便接下来的中间件调用
prompts:{
//格式可以参考https://github.com/SBoudrias/Inquirer.js/#question
name: {
type: 'string',
required: true,
message: 'Project name',
},
author: {
type: 'string',
message: 'Author',
},
description: {
type: 'string',
required: false,
message: 'Project description',
default: '构建一个lib',
},
lint: {
"type": "confirm",
"message": "是否用tslint"
},
},
filters: {
//当上面prompts的lint为false的时候，就过滤掉文件
"tslint.json": "lint",
"tsconfig.json": "lint"
}
}
复制代码至此，这里我们已经说明了基本原理，你应该已经可以搭出适合你团队的脚手架和模板了。
列举模板仓库
一般情况下都会有list命令
感谢github给我们提供了api，有以下比较好玩的接口
- 个人主要信息: api.github.com/users/用户名
- 个人所有repo:api.github.com/users/用户名/r…
- repo详细信息:api.github.com/repos/用户名/仓…
- issues列表。api.github.com/repos/用户名/仓…
- 某条issue详情:api.github.com/repos/用户名/仓… issues都是以1,2,3这样的序列排号的。
const logSymbols = require('log-symbols');
const chalk = require('chalk');
export default async function(...args) {
// 获取仓库列表
const res=await request({
url: 'https://api.github.com/users/yokiyokiyoki/repos',
method: 'GET'
}
);
let list;
if(res.status===200) {
console.log(logSymbols.info,chalk.green('共有下列模板'));
list=res.data.filter((item)=> {
return item.name.includes('ds-cli')&&item.name.includes('template');
}).forEach(item=> {
console.log();
console.log(chalk.green(item.name));
});
} else {
console.log(logSymbols.error,`获取仓库列表失败${res.data}`);
}
}
复制代码需要注意的是，有时候github抽风，请求的会比较慢，这样对用户体验不友好（尝试了几次ds list如果很慢，开发者会失去耐心）。
如果对用户体验有追求的同学，这里提供一个思路，就是缓存。可以把该结果写入文件，缓存到本地存模板的文件夹里（~/.ds-templates），同时把该请求时间（主要是用来判断是否是今天）也进去，然后我们在代码里判断一下：下次请求的时候，是否本本地有该文件，有的话就读一下，读了之后判断里面的时间和现在的时候是否是相隔一天，相隔一天就重新请求（时间间隔自己把握），覆盖原有缓存文件。
参考
- ds-cli:目前暂时命令有init和list（获取所有模板列表），含有详细注释，不懂你来！！！
- ds-cli-lib-template:基于rollup和typescript构建类库
- ds-cli-doc-template：基于vuepress的文档模板