究竟什麼是前端腳手架？

? 咱也不知道咱也不敢問啊

腳手架是為了保證各施工過程順利進行而搭設的工作平台。

然後搜一下「腳手架」，基本上都是以下幾類：

? 我最怕別人看到我的「腳手架」後說這有什麼卵用…

後來做的專案多了，覺得每次這麼新建專案太麻煩，我新建了乙個資料夾，專門存放初始的模板，然後複製貼上，繼續擼。

再後來，接觸到 vue，他可以實現在終端內輸入一行指令就能生成模板，這可比我複製貼上看起來高階多了，為了裝逼我開始了研究如何開發自己的「腳手架」。

當時還真是沒有幾篇文章把這種操作說的很明白，甚至我並不知道我要做的東西叫什麼（腳手架）。

? 百科裡說的很對我的思路，首要的就是保證我的專案可以順利進行。

semver，版本對比。

request，傳送請求，當然你也可以用 axios。

const semver =
require
('semver');
const request =
require
('request'
);

如果你的腳手架想分享給別人用，這步最好不要避免，因為如果你用了一些現代化的 es 語法，比如說 async await，老版本跑不起來的。

function
checknodeversion
(wanted)
}

正如上面所說，你如果分享給別人用，在你修改了一些 bug 後，希望其他人用最新的版本，那就應該提示他。

function
checkpackageversion
(url)
else
}else})
;});
}

引數 url 當然傳入 npm 的鏈結你的包名]/latest

如果不做這層判斷，你新生成的專案很可能會覆蓋你已有的專案，別問我為啥想到這麼做 ?

function hasfolder(name)  else 
});});
};

這裡加了一層 promise 是因為 node 去檢測是否存在資料夾是個非同步操作，也需要耗時，這麼做比較保險。

當你輸入完命令後，好像進入了新的頁面一樣，看起來很舒服。

function
clearconsole
(color, str)
}

所以我打算直接從全域性目錄下將模板資料夾拷貝到當前路徑下：

使用乙個工具 fs-extra，node.js 新手最好不要試圖用原生介面拷貝乙個資料夾。

const src = path.resolve(__dirname, 『…/template』);

const dest = path.resolve(process.cwd(), store.dirname);

兩個概念：

全域性環境路徑：

const src = path.
resolve
(__dirname,
'你的模板資料夾相對路徑'）

當前環境路徑：

const dest = path.
resolve
(process.
cwd(),
'你建立專案的名稱'
);

fs.
copy
(src, dest)
.then((
)=>
/* 巴拉巴拉 */
);

現在用 yarn 的人越來越多，而且確實效率很高，如果安裝過 yarn 就讓它作為預設包管理器去自動安裝依賴吧。

function
packagemanagement()
);return
'yarn';}
catch(e
)}

這裡用到 node.js 中的 child_process.spawn 方法

這裡舉個例子，想要執行 npm install webpack -d

const ls =
spawn
('npm',[
'isntall'
,'webpack'
,'-d'],
);ls.on
('close'
,(code)
=>
/* 巴拉巴拉 */
)

這裡推薦安裝的包帶有版本號，如果直接安裝會安裝最新版，可能會導致不相容。

progressplugin，用於監聽編譯進度。

plugins:
[new
webpack.progressplugin
(function
(percentage)
)]

這裡配合前面說到的清空控制台，可以實現更好的體驗。

這裡指的是通過 webpack 啟動的 devserver。

host 配置為 0.0.0.0

通過下面的函式獲取到本機的 ip 位址，這樣就可以在同網下使用移動裝置做測試了。

function
getipadress()
}}}

? 已經近一年沒有做過技術分享了，每天在掘金裡潛水，偶爾發點沸點，不敢在首頁發內容，總覺得自己技術不足，怕大佬噴，自尊心受到創傷。

最後分享一下我的「腳手架」，這個專案在我面試中也起到了不錯的效果：

文件：

前端腳手架

腳手架目錄 idea build configwebpack 配置檔案 dist打包輸出目 node modules依賴目錄 src assets資源 components自定義元件 pages每個vue 檔案對應乙個頁面，或者頁面的乙個元件 router路由整個專案的路由跳轉配置 config....

Vue Webpack搭建前端腳手架

第一步安裝node，配置node cache，node modules，指令如下 npm config set prefix d software node v8.9.3 win x86 node global npm config set cache d software node v8.9.3...

使用Yeoman定製前端腳手架

首先附上yeoman官網 yeoman.io 我製作的前端腳手架 generator jake front 以及我在前端同學的分享會上的分享ppt yeoman.key 如果想快速製作乙個腳手架，並且不需要實現特別複雜的定製化，看完這篇文章足夠，如果想要實現複雜的功能，需要去檢視官方文件。需要安裝n...

究竟什麼是前端腳手架？

前端腳手架

Vue Webpack搭建前端腳手架

使用Yeoman定製前端腳手架

相關推薦