从零开始一个前端脚手架（三）

优化

经过前两篇的介绍，关于一个命令行工具的雏形，已经有了，至于每个命令的具体实现，就是简单的调用webpack的api了，网上的资料很多，这里就不在累述了。但是前边代码中那个有一个需要优化的地方需要指出来（主要是网上资料不多，楼主也是被坑了好久）。就是入口文件的地方，前边是这么写的

#!/usr/bin/env node
require('@babel/polyfill')
require('@babel/core')

require('@babel/register')({
    presets: [require.resolve('@babel/preset-env')],
    ignore: [],
  })
require('./src/index')

上边的代码虽然可以执行，但是放在生产环境肯定不好，每次都要经过babel转义，浪费性能，楼主统计了一下，上边的代码大概要耗时500ms的样子。这是很难接受的。

正确的思路是，在我们把代码发到npm之前，应该先把代码经过babel转好了，再发包。具体怎么做呢？

• 首先安装babel提供的cli工具。

npm install @babel/cli --save-dev

• package.json中增加一条指令：

 "scripts": {
    "dev": "npx babel src --watch --out-dir lib"
  }

上边这条指令的作用是，检测src下的代码，一旦有变动就是经过babel编译一次，输出到lib目录下，开发的时候，先执行npm run dev.

• 入口文件改为：

#!/usr/bin/env node
require('./lib/index')

优化完毕！

结语

该系列的文章暂时到此结束了。旨在注明脚手架开发的流程以及配置（主要是这方面，网上资料较少），而对于具体的命令开发，没有具体展开（如果需要可以留言，后续可以补充）。

扫码关注公众号，查看更方便！