汇总前端脚手架开发中常用的第三方库

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

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

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

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

#npmlog

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

复制var log = require('npmlog')






    log.info('fyi', 'I have a kitty cat: %j', myKittyCat)

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

level

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

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

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

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

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

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

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

复制log.level = 'info'
log.verbose()
log.info()

还可以设置前缀：

复制log.heading = 'yijing'
log.headingStyle = { fg: 'red', bg: 'white' }


log.success('test', 'success')

#dotenv

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

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

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

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

复制FOO=BAR

3. 使用

复制require('dotenv').config({ path: '.env' })

console.log(process.env.FOO) 

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

#semver

用于版本号相关的操作。

复制const semver = require('semver')


semver.valid('1.2.3') 
semver.valid('a.b.c') 


semver.clean('  =v1.2.3   ') 



semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') 


semver.gt('1.2.3', '9.8.7') 
semver.lt('1.2.3', '9.8.7') 


semver.lte
semver.gte

#minimist

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

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

复制node process-argv.js one two=three four


0: /usr/local/bin/node 
1: /Users/mjr/work/node/process-args.js 
2: one
3: two=three
4: four

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

复制const args = require('minimist')(process.argv.slice(2))

node test.js -a a -b b


node test.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz

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

#colors

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

复制const colors = require('colors/safe')

console.log(colors.red('当前用户主目录不存在'))

#fs-extra

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

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

复制const fs = require('fs-extra')


fs.copy('/tmp/myfile', '/tmp/mynewfile')
  .then(() => console.log('success!'))
  .catch(err => console.error(err))


fs.copy('/tmp/myfile', '/tmp/mynewfile', err => {
  if (err) return console.error(err)
  console.log('success!')
})


try {
  fs.copySync('/tmp/myfile', '/tmp/mynewfile')
  console.log('success!')
} catch (err) {
  console.error(err)
}


async function copyFiles () {
  try {
    await fs.copy('/tmp/myfile', '/tmp/mynewfile')
    console.log('success!')
  } catch (err) {
    console.error(err)
  }
}

copyFiles()

#url-join

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

复制import urlJoin from 'url-join';

const fullUrl = urlJoin('http://www.google.com', 'a', '/b/cd', '?foo=123');

console.log(fullUrl); 

#pkg-dir

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

复制└── Users
    └── sindresorhus
        └── foo
            ├── package.json
            └── bar
                ├── baz
                └── example.js

复制import {packageDirectory} from 'pkg-dir';

console.log(await packageDirectory());

#cli-spinner

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

复制function spinnerStart(msg, spinnerString = '|/-\\') {
  const Spinner = require('cli-spinner').Spinner
  const spinner = new Spinner(msg + ' %s')
  spinner.setSpinnerString(spinnerString)
  spinner.start()
  return spinner
}

const spinner = spinnerStart('正在下载模板...')

await sleep()
spinner.stop(true)

#inquirer

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

复制{
  type: 'input' 
  name: 'name' 
  message: '用户名' 
  default: '' 
  choices: '' 


  
  validate(value){
    return !value.length ? new Error('项目名称不能为空') : true
  }
  
  
  filter(value){
     return /vue/.test(value) ? `${value}-demo` : value
  }
  
  transformer(value){
     return /vue/.test(value) ? `${value}-demo` : value
  }
}

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

复制const projectNamePrompt = {
      type: 'input',
      name: 'projectName',
      message: `请输入${title}名称`,
      default: '',
      validate: function (v) {
        const done = this.async()
        setTimeout(function () {
          if (!isValidateName(v)) {
            done(`请输入合法的${title}名称`)
            return
          }
          done(null, true)
        }, 0)
      },
      filter: function (v) {
        return v
      }
    }

#glob

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

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

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

复制const glob = require('glob')

glob(
  
  '**/*.js',
  {
    
    ignore: ['node_modules/**']
  },
  function (err, files) {
    console.log(files)
  }
)

#kebab-case

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

复制var kebabCase = require("kebab-case");

kebabCase("WebkitTransform");
// "-webkit-transform"
kebabCase.reverse("-webkit-transform");
// "WebkitTransform"

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