從零開始一個前端腳手架（三）

優化

經過前兩篇的介紹，關於一個命令行工具的雛形，已經有了，至於每個命令的具體實現，就是簡單的調用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')

優化完畢！

結語

該系列的文章暫時到此結束了。旨在註明腳手架開發的流程以及配置（主要是這方面，網上資料較少），而對於具體的命令開發，沒有具體展開（如果需要可以留言，後續可以補充）。

掃碼關注公衆號，查看更方便！