从零打造你的前端开发脚手架

南城FE
3,491 阅读8分钟

本文正在参加「金石计划」

在实际开发过程中，我们经常都会用到脚手架来构建前端工程项目，常见的主流框架都有自己的脚手架，vue-cli、create-react-app、angular-cli。在大型公司都会有内部定制化的脚手架开发工具，使用脚手架可以大幅提升项目的构建速度，通过命令行的交互，选择你所需要的配置与集成，可快速完成初始项目的创建。

既然使用了这么多脚手架创建项目，为何不自己实现一套属于自己开发习惯的脚手架呢，本文将从0开始搭建一套脚手架开发工具。

什么是脚手架

脚手架是一类快速形成工程化目录的工具(command-line-interface, 缩写：CLI)，简单来说，脚手架就是帮你减少「为重复性工作而做的重复性工作」的工具。

基于我们日常使用过的脚手架得知一个脚手架至少需要实现以下的功能点：

  • 有不同的命令执行操作，比如：
Commands:
  create [options] <app-name>
  add [options] <plugin> [pluginOptions]
  invoke [options] <plugin> [pluginOptions]
  inspect [options] [paths...]
  serve
  build
  ui [options]
  init [options] <template> <app-name>
  config [options] [value]
  outdated [options]
  upgrade [options] [plugin-name]
  migrate [options] [plugin-name]
  info
  help [command]
  • 可以通过命令行交互执行问答列表
? Please pick a preset:
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  • 最终根据用户的问答结果生成对应的文件

必备的知识库

在完善构建脚手架前，需要引入一些脚手架构建中必须用到的工具库。

  • commander 可以自定义一些命令行指令，在输入自定义的命令行的时候，会去执行相应的操作

  • inquirer 可以在命令行询问用户问题，并且可以记录用户回答选择的结果

  • fs-extra 是fs的一个扩展，提供了非常多的便利API，并且继承了fs所有方法和为fs方法添加了promise的支持。

  • chalk 可以美化终端的输出

  • figlet 可以在终端输出logo

  • ora 控制台的loading动画

  • download-git-repo 下载远程模板

实现过程

创建脚手架

新建一个文件夹，执行 npm init 生成package.json文件。

npm init -y

创建bin文件夹，bin文件夹存放主要的命令程序入口文件，并在文件夹下面新建index.js文件，目录结构如下：

fe   
├─ bin
│  ├─ index.js          
└─ package.json

在package.json指定命令的入口文件为刚刚新建的index.js，bin下面的fe为程序的快速启动命令。

{
  "name": "fe",
  "version": "1.0.0",
  "main": "index.js",
  "bin": {
    "fe": "./bin/index.js"
  },
  ...
}

修改入口文件index.js为如下内容，文件以#!开头代表这个文件被当做一个执行文件来执行，可以当做脚本运行。后面的/usr/bin/env node代表这个文件用node执行，node基于用户安装根目录下的环境变量中查找：

#! /usr/bin/env node

console.log('hello fe cli')

最后将当前命令链接到全局，即可测试是否正常

npm link

此时在命令行中输入刚刚的快速启动命令fe，输出了打印的日志。说明执行了index.js中的代码，接下来就开始正式搭建脚手架的功能。

这里我们可以额外扩展一下输出的样式，当然这个不是必要的，平时安装依赖包的时候经常会看到不同颜色的输出和LOGO，主要是用了chalk和figlet，示例代码如下：

program
  .on('--help', () => {
    console.log('\r\n' + chalk.white.bgBlueBright.bold(figlet.textSync('nanChengFE', {
      font: 'Standard',
      horizontalLayout: 'default',
      verticalLayout: 'default',
      width: 80,
      whitespaceBreak: true
    })));
    console.log(`\r\nRun ${chalk.cyan(`fe <command> --help`)} for detailed usage of given command\r\n`)
  })

最终输出的样式如下，具体的其他LOGO样式和字体颜色可以看官方文档。

脚手架功能完善

基于commander执行自定义命令指令，具体的使用可以看相关文档，以下实现一个简单的create命令，传入参数并打印输出日志。

#! /usr/bin/env node
const { Command } = require('commander');
const program = new Command();

program
  .name('fe cli')
  .description('这里是描述文案')
  .version('1.0.0');

program.command('create <name>')
  .description('创建一个新工程')
  .action((name) => {
    console.log('[ 工程名称 ] >', name)
  });

program.parse(process.argv);

通过command定义create命令，并要求必传参数name，再通过action回调获取到传入的参数，后续即可通过用户输入的名称创建项目。

接下来进入创建文件的过程，在创建文件的时候需要校验当前目录下是否已经存在，如果存在是否需要执行覆盖的动作。

const path = require('path')
const fs = require('fs-extra')

// 当前命令行执行的目录
const cwd  = process.cwd();
// 需要创建的目录
const targetPath  = path.join(cwd, name)

// 目录是否存在
if (fs.existsSync(targetPath)) {
  // 强制创建
  if (options.force) {
  } else {
    // 询问用户是否需要强制创建
  }
} else {
  // 目录不存在正常创建
}

以上代码可以看出options.force命令参数可以直接进入到强制创建的过程。如果还有其他的想法想通过不同的指令做不同的处理，可以参考强制创建的逻辑进行其他的自定义。

上面提到了询问用户是否需要强制创建，这需要通过命令行与用户进行交互，获取到用户选择的信息，inquirer这个包可以在命令行询问用户问题并拿到结果进行后续的逻辑交互。

let { action } = await inquirer.prompt([{
  name: 'action',
  type: 'list',
  message: '目录已存在，请选择:',
  choices: [{
    name: '覆盖',
    value: 'overwrite'
  }, {
    name: '取消',
    value: false
  }]
}])

if (!action) {
  return;
} else if (action === 'overwrite') {
  // 移除已存在的目录
  await fs.remove(targetPath)
}

接下来继续询问要选择哪个模版，这个github有提供相关的接口，也可以自己维护模版配置的相关接口，核心就是让用户选择需要的模版，比如模版里有vue，react，小程序等不同场景或框架模版，用户选择模版后获取到对应的远端模版地址进行下载，这里会用到两个新的npm包，ora 可以在控制台输出loading动画，download-git-repo 执行下载远程模板。示例代码如下：

const spinner = ora('远端仓库开始下载...');
spinner.start();

// 本地存放地址
const tmp = path.join(
  process.cwd(),
  'templates',
  '工程目录名称',
);

// 已存在路径执行删除
if (fs.existsSync(tmp)) {
  await fs.remove(tmp)
}

// 下载远端模版
download(
  '远端仓库地址',
  tmp,
  {
    clone: true,
  },
  (err) => {
    if (err) {
      spinner.fail('[ 远端仓库下载失败 ]')
      logger.console.error();
    }
    spinner.succeed('[ 远端仓库下载成功 ]')
  }
)

操作过程如下：

如果只是做一个简单版本的脚手架下载模版到这里基本就差不多了，选择对应的框架就下载对应的模版。但是实际开发过程中往往还不够，不同的框架中还会不同的配置，比如使用vue框架时，是否需要自动加入vuex，vue-router等等。所以在不同的模版中我们还要进行下一步的用户问询配置，基于用户回答的结果创建更符合的工程文件。

这一段可以参考Vue-cli的源码，在不同的模板项目中增加相关的问询配置，比如在Vue模版中新增了以下prompts配置：

  "name": {
    "type": "string",
    "required": true,
    "message": "填写项目名称"
  },
   "description": {
    "type": "string",
    "required": false,
    "message": "填写项目描述",
    "default": "ZZZ前端vue项目"
  },
  ...

在执行结束下载文件后继续执行项目问询配置列表，效果如下：

最后根据获取到的用户回答结果进行工程文件的生成，比如将获取到的工程名称直接填充到模版内容中，根据用户的选择是否需要增加vuex的使用等。这块主要会用到以下几个依赖。

  • Metalsmith 静态网站（博客，项目）的生成器
  • handlerbars 模板编译器，通过template和json，输出一个html
  • consolidate 模板引擎整合库

在vue_cli源码中注册了2个渲染器，类似于vue中的 v-if v-else的条件渲染，这个我们可以根据实际需要扩展其他的条件渲染。

// register handlebars helper
Handlebars.registerHelper('if_eq', function (a, b, opts) {
  return a === b
    ? opts.fn(this)
    : opts.inverse(this)
})

Handlebars.registerHelper('unless_eq', function (a, b, opts) {
  return a === b
    ? opts.inverse(this)
    : opts.fn(this)
})

在模版文件中使用对应的标识，结合模板编译器即可动态生成内容，具体的构建细节有兴趣的大家可以看看源码或者其他文章详细的解析。

{{#if_eq userSelectVuex 'vuex'}}
import Vuex from 'vuex'
Vue.use(Vuex)
{{/if_eq}}

列举这些是想说明如果要改造一个脚手架生成的模版内容我们直接可以找到对应的配置进行增加修改，在用户问询处增加需要的场景字段，获取到对应的值进行模版内容的动态处理。

总结

到这里我们实现了一个简单的开发脚手架，有自定义的快捷命令，可以进行模板选择，可以根据不同的模板进行下一步的配置选择，最终生成工程文件。这只是一个简单的实现，看vue脚手架的命令就可以看出还有很多功能点可以进一步完善，有兴趣的同学可以深入研究。

到此本文就结束了，看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

avatar
文章
阅读
粉丝