從0到1手把手開發腳手架

前面對腳手架和其原理有個初步的認識: 認識vue-cli腳手架 、 淺析vue-cli腳手架命令的執行過程

本篇將和大家一起實操，從零開始搭建一個簡易的腳手架(需要有node環境)~

首先，新建一個文件夾wang-cli-test，在該文件夾下打開終端，初始化項目：npm init -y。

用vs code打開該項目，新建子文件夾bin，bin目錄下新建index.js，如圖：

 

 接下來配置package.json文件：

{
  "name": "wang-cli-test",
  "version": "1.0.0",
  "description": "",
  "bin": {
    "wang-test": "bin/index.js"
  },
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

上面代碼中bin中的"wang-test"就是以后腳手架的主命令，會指向bin/index.js文件。

接下來編輯bin/index.js文件：

#!/usr/bin/env node

console.log('hellow wang')

#!/usr/bin/env node這行代碼前文已經介紹用法了，主要是用於聲明該文件以node命令來執行。

准備工作都已完成，接下來將該項目發布到npm上，具體怎么發布可以自行百度，不想發布到線上的話，可以繼續往下看，后面會介紹如何本地調試npm包~

線上發布成功后全局安裝我們這個腳手架：

 

 輸入主命令： wang-test 

 

 在bin/index.js中的代碼就成功執行，這樣我們的第一個腳手架的最簡版本已經完成啦。

腳手架的雛形已經完成，但是我們知道腳手架遠遠不止如此！腳手架的開發過程中需要依賴很多包，下面我們將給我們的腳手架增加一個包，先給大家介紹一個npm包本地調試的方法~

 

新建一個項目，重復文章開頭的操作，不同之處是package.json中的bin不同：

 

 

 

接下來將把這個npm包加入到本地調試，避免發布線上的繁瑣操作(比如每次修改之后發布，會要求你修改version...)

在當前項目下,輸入  npm link

 

 

 

 在node目錄中：C:\Users\Administrator\AppData\Roaming\npm會出現以下幾個文件：

 

 

 細心的你肯定會發現，我們之前全局安裝我們線上腳手架的時候，也生成了這些命令文件：

 

 

 wang-test.cmd和wangs-test.cmd文件都會有這行代碼：

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\node_modules\wangs-test\bin\index.js" %*z

我們進入到node_modules文件夾下會看到：

 

 

 

 wang-cli-test文件夾就是我們開頭npm全局安裝的腳手架，下面的wangs-test是我們本地腳手架，這里是個快捷方式，會軟鏈接到我們wangs-test這個項目所在地址~

這倆個命令最終都會指向我們項目中的bin\index.js文件！再來測試一下，wangs-test這條命令能不能執行：

這樣，本地調試已經實現~ 接下來給腳手架wangs-test增加一個包依賴。

再新建一個項目wangs-test-module,項目結構如下：

 

 

 index.js:

module.exports = {
  log() {
    console.log('我是依賴包!!!')
  }
}

package.json:

{
  "name": "wangs-test-module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

怎么將該項目(wangs-test-module)加入到wangs-test的包依賴呢，還是用 npm link!

在wangs-test-module目錄下執行npm link將該項目加入本地調試。

在wangs-test下引入分包：npm link wangs-test-module。

​

​小回車標志代表的就是本地軟鏈接的包文件。 ​

繼續執行：npm i -S wangs-test-module，此時會報錯404，意思是npm沒有找到這個包，此時我們需要在wangs-test的package.json中手動增加依賴：

"dependencies": {
    "wangs-test-module": "^1.0.0"
  }

繼續執行：npm i -S wangs-test-module就成功啦！接下來使用這個包：

wangs-test項目中的index.js文件：

#!/usr/bin/env node

console.log('hellow wang')

const mod = require("wangs-test-module");

console.log(mod);

好的，繼續執行腳手架命令，看看有沒有引入成功。

 

 

 這個錯誤的原因，是我們的分包文件的package.json中的main入口文件有誤，將其改為： "main": "src/index.js", 

接下來執行wangs-test

 

 

 成功引入分包！

腳手架本地調試完分包后，一切正常的話，就可以將分包和腳手架一起發布到npm啦~

以上就是從0到1開發一個最基礎的腳手架啦，后面還會繼續探索腳手架更深層次的原理和更復雜的操作~

 

腳踏實地行，海闊天空飛~