前端腳手架scaffold實踐

最近對團隊開發的腳手架研究了下並參與進去作了一點工做，以爲很是的有意思，自此開闢了前端學習的另外一條道路。

目的

相信你們在開發過程當中都遇到這樣的問題：爲了新建項目，要不停地拷貝文件，配置什麼的，或者乾脆從零開始，這樣是很是浪費時間的。
這個時候，一個善解人意的scaffold就很被你們須要了，它能夠僅用簡單的命令就幫助咱們完成項目的建立，編譯打包，發佈等工做，讓咱們能夠專一於咱們的核心業務。
整體來講，一個貼心的scaffold能夠幫咱們解決如下問題：

• 減小重複性的工做，再也不須要複製其餘項目再刪除無關代碼，或者從零建立一個項目和文件。
• 根據交互動態生成項目結構和配置文件等。
• 多人協做更爲方便，不須要把文件傳來傳去。

功能實現

經過命令行詢問用戶並獲取用戶輸入參數，根據用戶的輸入參數進行項目的建立，啓動，編譯，發佈，刪除，更新依賴包等工做。

開發scaffold經常使用依賴包:

交互界面相關：scaffold須要經過命令行或者可視化工具與用戶互動來獲取用戶的意圖，這裏咱們採用命令行的方式詢問用戶並獲取用戶輸入。下面的幾個包能夠幫助咱們完成這些事情：

yargs	經過解析參數並生成優雅的用戶界面來構建交互式命令行工具	https://www.npmjs.com/package...
inquirer	常見的交互式命令行用戶界面的集合	https://www.npmjs.com/package...
chalk	能夠修改控制檯中字符串的樣式	https://www.npmjs.com/package...

yargs用法示例：

#!/usr/bin/env node
require('yargs') // eslint-disable-line
  .command('serve [port]', 'start the server', (yargs) => {
    yargs
      .positional('port', {
        describe: 'port to bind on',
        default: 5000
      })
  }, (argv) => {
    if (argv.verbose) console.info(`start server on :${argv.port}`)
    serve(argv.port)
  })
  .option('verbose', {
    alias: 'v',
    type: 'boolean',
    description: 'Run with verbose logging'
  })
  .argv

用--help參數運行此段腳本以下：

node進程和文件操做相關：因爲咱們的scaffold是在node環境下運行，因此要用到不少node的API，最多的就是子進程child_process和文件系統fs，不過咱們並無使用原生的node API，而是嘗試了一些兼容性更好，使用更方便的第三方node依賴包。

cpx	linux的cp命令，多了watching功能	https://www.npmjs.com/package...
cross-spawn	node的spawn和spawnSync的跨平臺（window，macos等）解決方案	https://www.npmjs.com/package...
asnyc	處理異步javascript	https://www.npmjs.com/package...
fs-extra	補充了node的fs模塊，支持方法的promise	https://www.npmjs.com/package...
replace	用於在文件上執行搜索和替換的命令行實用程序	https://www.npmjs.com/package...
empty-dir	檢查目錄是否爲空	https://www.npmjs.com/package...

用法示例：

const spawn = require('cross-spawn');
 
// Spawn NPM asynchronously
const child = spawn('npm', ['list', '-g', '-depth', '0'], { stdio: 'inherit' });
 
// Spawn NPM synchronously
const result = spawn.sync('npm', ['list', '-g', '-depth', '0'], { stdio: 'inherit' });

文件編譯相關：scaffold的開發過程當中常常須要處理配置文件的建立，替換內容等，這些都與AST（抽象語法解析樹）緊密相關。esprima和escodegen就是兩個常常用的處理AST的依賴包。

esprima	將javascript解析成AST的解析器	https://www.npmjs.com/package...
escodegen	將AST生成javascript	https://www.npmjs.com/package...

escodegen用法示例：

escodegen.generate({
    type: 'BinaryExpression',
    operator: '+',
    left: { type: 'Literal', value: 40 },
    right: { type: 'Literal', value: 2 }
});

esprima用法示例：

var esprima = require('esprima');
var program = 'const answer = 42';
console.log(esprima.tokenize(program));

// 能夠看到把const answer = 42解析以下：
[
  { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'answer' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '42' }
]

衆多typescript類型文件

當使用第三方庫時，咱們須要引用它的聲明文件，這樣才能得到對應的代碼補全、接口提示等功能。推薦使用 @types 統一管理第三方庫的聲明文件，好比@types/async，@types/cross-spawn，@types/empty-dir等。

整體來講開發scaffold是一件頗有意思的事情，後面還會繼續探索。

參考文章

• #!/usr/bin/env node 究竟是什麼？https://juejin.im/post/5cb93c...
• typescript聲明文件：https://ts.xcatliu.com/basics...