在前端工程化方面我们使用的各种工具，绝大部分都是使用 Nodejs 写的。

比如，打包工具 webpack 及 rollup；前端框架 Vue 自带的脚手架工具 vue-cli；以及 CSS 样式工具scss、less等等。

在日常工作中难免会遇到一些需求，需要自己创建一个脚手架工具来提升整个团队的研发部署效率。

目前，npm上汇集了大量优秀的开发脚手架的第三库，熟练掌握这些库，可以大大提升我们的开发效率。本文将介绍一些在开发前端脚手架方面非常常用的第三方库，希望能帮助到你。

npmlog

这个工具用来定制各种打印日志，比如颜色，字体粗细等，让打印的日志更加清晰。

复制 1var log = require('npmlog')
 2
 3
 4
 5
 6
 7
 8    log.info('fyi', 'I have a kitty cat: %j', myKittyCat)

它主要包括：日志级别(info)，前缀(prefix)，打印信息(message)。

level

level 表示日志的级别，在此级别或以上的任何日志都将被显示。

它的默认级别是info，它还有其他的级别，比如：

复制 1log.addLevel('silly', -Infinity, { inverse: true }, 'sill')
 2log.addLevel('verbose', 1000, { fg: 'blue', bg: 'black' }, 'verb')
 3log.addLevel('info', 2000, { fg: 'green' })
 4log.addLevel('timing', 2500, { fg: 'green', bg: 'black' })
 5log.addLevel('http', 3000, { fg: 'green', bg: 'black' })
 6log.addLevel('notice', 3500, { fg: 'blue', bg: 'black' })
 7log.addLevel('warn', 4000, { fg: 'black', bg: 'yellow' }, 'WARN')
 8log.addLevel('error', 5000, { fg: 'red', bg: 'black' }, 'ERR!')

级别的大小通过数字表示，info的级别大小是2000。

我们还可以增加 level，比如增加了 success，它的级别是2000：

复制 1log.addLevel('success', 2000, { fg: 'green', bold: true })

下面的代码执行打印 info 级别的日志，因为目前的级别是 info ，verbose的级别是1000比2000小，所以不会打印出来。

复制 1log.level = 'info'
 2log.verbose()
 3log.info()

还可以设置前缀：

复制 1log.heading = 'yijing'
 2log.headingStyle = { fg: 'red', bg: 'white' }
 3
 4
 5log.success('test', 'success')

dotenv

它能将从.env 文件里面设置的环境变量加载到 process.env 中。

所谓环境变量就是一个全局变量，不管在哪个位置都能访问到这个变量

使用方法非常简单，步骤如下：

1. 在项目中安装 dotenv
2. 根目录下创建 .env 文件

复制 1FOO=BAR

3. 使用

复制 1require('dotenv').config({ path: '.env' })
 2
 3console.log(process.env.FOO) 

使用 dotenv 可以让我们免于在各个文件中引入配置文件，也可以很好的解决敏感信息的泄漏，利于后期代码维护

semver

用于版本号相关的操作。

复制 1const semver = require('semver')
 2
 3
 4semver.valid('1.2.3') 
 5semver.valid('a.b.c') 
 6
 7
 8semver.clean('  =v1.2.3   ') 
 9
10
11
12semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') 
13
14
15semver.gt('1.2.3', '9.8.7') 
16semver.lt('1.2.3', '9.8.7') 
17
18
19semver.lte
20semver.gte

minimist

它的作用是进行命令行参数解析。

首先需要先了解下process.argv：

复制 1node process-argv.js one two=three four
 2
 3
 40: /usr/local/bin/node 
 51: /Users/mjr/work/node/process-args.js 
 62: one
 73: two=three
 84: four

我们常用process.argv.slice(2)来获取参数。再来看minimist的用法及例子：

复制 1const args = require('minimist')(process.argv.slice(2))
 2
 3node test.js -a a -b b
 4
 5
 6node test.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
 7
 8
 9
10
11
12
13
14

minimist 会解析参数，并放到一个对象中，方便在脚本中读取。特别要说明的是其中首个key是_，它的值是个数组，包含的是所有没有关联选项的参数。

colors

colors是一个纯粹的设置node.js console颜色的库。chalk这个库是改变打印文字的颜色，两个库都差不多。

复制 1const colors = require('colors/safe')
 2
 3console.log(colors.red('当前用户主目录不存在'))

fs-extra

这个框架是对 node fs 模块的封装，并提供了promise的支持。在使用时，你不必再引用const fs = require('fs')，而是直接引用const fse = require('fs-extra')。

这个库的每个方法当然也包括同步和异步，它们的使用如下:

复制 1const fs = require('fs-extra')
 2
 3
 4fs.copy('/tmp/myfile', '/tmp/mynewfile')
 5  .then(() => console.log('success!'))
 6  .catch(err => console.error(err))
 7
 8
 9fs.copy('/tmp/myfile', '/tmp/mynewfile', err => {
10  if (err) return console.error(err)
11  console.log('success!')
12})
13
14
15try {
16  fs.copySync('/tmp/myfile', '/tmp/mynewfile')
17  console.log('success!')
18} catch (err) {
19  console.error(err)
20}
21
22
23async function copyFiles () {
24  try {
25    await fs.copy('/tmp/myfile', '/tmp/mynewfile')
26    console.log('success!')
27  } catch (err) {
28    console.error(err)
29  }
30}
31
32copyFiles()

url-join

将所有参数连接在一起，并规范化结果URL。

复制 1import urlJoin from 'url-join';
 2
 3const fullUrl = urlJoin('http://www.google.com', 'a', '/b/cd', '?foo=123');
 4
 5console.log(fullUrl); 

pkg-dir

找到 npm 项目中package.json所在的目录：

复制 1└── Users
 2    └── sindresorhus
 3        └── foo
 4            ├── package.json
 5            └── bar
 6                ├── baz
 7                └── example.js

复制 1import {packageDirectory} from 'pkg-dir';
 2
 3console.log(await packageDirectory());
 4

cli-spinner

脚手架开发中如果要安装一个比较大的文件，此时最好有一个 loading 效果，cli-spinner的功能就是在命令行中产生一个loading效果。

复制 1function spinnerStart(msg, spinnerString = '|/-\\') {
 2  const Spinner = require('cli-spinner').Spinner
 3  const spinner = new Spinner(msg + ' %s')
 4  spinner.setSpinnerString(spinnerString)
 5  spinner.start()
 6  return spinner
 7}
 8
 9const spinner = spinnerStart('正在下载模板...')
10
11await sleep()
12spinner.stop(true)

inquirer

交互式的命令行信息收集器。

复制 1{
 2  type: 'input' 
 3  name: 'name' 
 4  message: '用户名' 
 5  default: '' 
 6  choices: '' 
 7
 8
 9  
10  validate(value){
11    return !value.length ? new Error('项目名称不能为空') : true
12  }
13  
14  
15  filter(value){
16     return /vue/.test(value) ? `${value}-demo` : value
17  }
18  
19  transformer(value){
20     return /vue/.test(value) ? `${value}-demo` : value
21  }
22}

validate如果不通过，按照上面的写法是不会给用户提示的，为了当用户输错时，给用户提示需要这么写：

复制 1const projectNamePrompt = {
 2      type: 'input',
 3      name: 'projectName',
 4      message: `请输入${title}名称`,
 5      default: '',
 6      validate: function (v) {
 7        const done = this.async()
 8        setTimeout(function () {
 9          if (!isValidateName(v)) {
10            done(`请输入合法的${title}名称`)
11            return
12          }
13          done(null, true)
14        }, 0)
15      },
16      filter: function (v) {
17        return v
18      }
19    }

glob

glob最早是出现在类Unix系统的命令行中, 是用来匹配文件路径的。比如，lib/**/*.js 匹配 lib 目录下所有的 js 文件。

除了在命令行中，我们在程序中也会有匹配文件路径的需求。于是，很多编程语言有了对 glob 的实现 ，如 Python 中的 glob 模块； php 中的 glob 方法。

nodejs中没有对glob进行实现，但是我们可以安装glob这个库进行使用。

复制 1const glob = require('glob')
 2
 3glob(
 4  
 5  '**/*.js',
 6  {
 7    
 8    ignore: ['node_modules/**']
 9  },
10  function (err, files) {
11    console.log(files)
12  }
13)

kebab-case

把驼峰形式转化为中划线形式。

复制 1var kebabCase = require("kebab-case");
 2
 3kebabCase("WebkitTransform");
 4// "-webkit-transform"
 5kebabCase.reverse("-webkit-transform");
 6// "WebkitTransform"

以上介绍的第三方库都是开发前端脚手架经常用到的，熟练使用它们能提升你的开发速度和效率。