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

前言

在前端工程化概念越來越火的當下，作爲前端工程師，老老實實的寫業務貌似越來越不能滿足需求，領導們的口中永遠是提效以及產出。幹再多的業務不如別人產出一個腳手架有說服力，那麼寫一個腳手架真的那麼難嗎？其實不然，本系列的文章將從零開始一個簡單的前端腳手架。

準備工作

首先，我們默認你的電腦中裝有node。然後這些前期的準備工作將實現在任意目錄下的命令行工具中都可以通過一個命令執行指定的一段代碼。

第一步：建立目錄

首先，在你的工作目錄下建立一個目錄simple-cli。該目錄下有兩個文件夾cli,demo。

simple-cli
├── cli
└── demo

未來會在cli下寫我們的腳手架工具，demo中寫一些測試用例。

第二步：建立軟鏈接

在cli下建立一個index.js文件，文件中寫入

#!/usr/bin/env node   // 指定執行環境是node。 
console.log('test')

執行pwd。得到該文件的絕對路徑：

/Users/XXXX/Desktop/study/simple-cli/cli   //xxxx是你的用戶名

現在思考幾個問題：

• 怎麼才能執行這個文件？
• 當我們本地安裝了create-react-app後，爲什麼就能在工作目錄下執行 create-react-app my-app?

這裏就出現了一個叫軟鏈接的東西。在create-react-app源碼的package.json中有這麼一段：

  "bin": {
    "create-react-app": "./index.js"
  },

這一段的意思就是，全局安裝create-react-app後，會建立一個軟鏈接到項目的.index.js。所以執行任何create-react-app的指令，都會走到這個index.js。

本地看一下，打開你的命令行工具，輸入：which create-react-app, 會返回：/usr/local/bin/create-react-app。現在我們執行cd /usr/local/bin/，接着執行ll。會看到其中一行爲：

lrwxr-xr-x  1 root         wheel    45B  9 27  2018 create-react-app -> ../lib/node_modules/create-react-app/index.js

可以看到，create-react-app指向了一個js文件。

現在在該目錄下執行指令建立鏈接：

ln -s /Users/XXXX/Desktop/study/simple-cli/cli/index.js  simple-cli
// 前邊的路徑爲上邊pwd輸出的文件路徑

返回到你的工作目錄，執行 simple-cli。如果不出意外的話會得到如下異常：

permission denied: simple-cli

說明權限不夠，接下來修改index.js文件的權限，使之可以執行：

chmod 777  index.js

再次執行 simple-cli。就會輸出：test

至此，前期準備工作就完成了。接下來就可以在index.js文件中開發腳手架的具體功能了。

查看源碼：https://github.com/keep-run/simple-cli

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