前端如何搭建一个成熟的脚手架

11,004 阅读6分钟

前言

有了之前的基础(前端如何搭建一个简单的脚手架),我们现在可以讲讲一个成熟的脚手架是怎么做了。

这里我们参考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('<command>')
  .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 <template-name> <app-name> #模板名字和应用名字

流程与逻辑

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,有以下比较好玩的接口


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的文档模板