前端腳手架核心原理

相信小夥伴們若是學過Vue、React確定使用過腳手架

好比Vue的vue-cli、React的create-react-app

但你知道他們的原理嗎？

前端腳手架核心原理

其實也沒多複雜哈，其實就這就幾步～

• 註冊主命令
• 使用node運行
• 註冊參數命令事件

註冊主命令

什麼是主命令？

好比 vue create app

vue 就是主命令，create 是子命令，app 就是option參數（這裏指項目名稱）

怎麼實現？

• 初始化項目

其實就是建立個文件夾，切到目錄npm init -y 初始一下，完事～

(由於我叫阿遠，我直接ayuan，嘻嘻～)

mkdir ayuan-cli
cd ayuan-cli
npm init -y
複製代碼

• 建立index.js文件

在項目中建立index.js,而後隨便加一句話

console.log('hello~')
複製代碼

• 修改package.json

重點來了哈,在package.json中加上這句話

"bin": {
  "ayuan": "index.js"
}
複製代碼

再切到命令行，輸入

npm link
複製代碼

其實就是把項目直接安裝到本地，不須要發佈到npm，再安裝，很是的好用哈！

這就完成命令註冊！

不信，你試試！

提示必定是從

command not found: ayuan
複製代碼

到

syntax error near unexpected token `'hello~''
複製代碼

(我都替你測好幾回了！)

使用node運行

好了，出現上述的提示，其實就是我們系統不知道他要用什麼環境運行

怎麼告訴他？在index.js的第一行，必定是第一行哈，加下面一句話

#!/usr/bin/env node
複製代碼

像這樣！

你再切到命令行，輸入ayuan,或者你用bin的註冊的命令,必定會輸出hello~

若是不行，那就是你上述步驟作錯了！（哎，我無論）

註冊參數命令事件

註冊參數命令事件，這其實可拆兩步解析參數和註冊參數事件

• 解析參數

好，先說第一步，解析參數

好比，咱們知道 vue-cli, 建立項目命令是vue create project

其實能夠認爲create和project都是參數

怎麼獲取？可使用process.argv

我能夠在這貼下文檔（否則說我胡說八道）

這樣咱們不就直接用process.argv.slice(2)就可獲取參數了，注意是數組

• 註冊參數事件

固然得使用commander庫(vue-cli、create-react-app也在用哦) 能夠貼下 vue-cli源碼

npm install commander -S
複製代碼

安裝完，快速coding

// 引入 Command
const { Command } = require('commander')
const program = new Command()

// 獲取 package.json 版本
const version = require('./package.json').version

program.version(version) // 註冊版本
    .usage('<command> [options]') // 使用命令格式
    
program.parse(process.argv); // 解析參數，必定放最後    
複製代碼

這時候，就能夠輸入

ayuan --version
複製代碼

看看有無版本號輸出，有得話說明commander使用成功

接下就是註冊命令

program.command('init <name>')
    .option('-d, --default', '默認配置', false) // 第一是想要註冊參數， 第二是參數是描述， 第三是默認值
    .action((name, options) => {
        console.log(name)
        console.log(options)
    })
複製代碼

這行代碼必定要放在

否則代碼不會生效哈！

咱們使用ayuan init test 和 ayuan init test -d

就會很輕鬆看到

和

好了，以上就是核心原理～

確實就醬～接下來是命令作一些的事情，包括詢問用戶配置、生成模板

感謝閱讀～

補充：

小夥伴可能不知道怎麼找vue-cli或者create-react-app的源碼

拿vue-cli作例子

直接在命令行下輸入 which vue，找到文件路徑

發如今一個文件bin目錄下，切到目錄 輸入 ls -l，找到vue真實文件

其實就是上一級目錄中lib文件下的node_modules

而入口文件就是這個vue.js

就醬～