搭建自己的腳手架—「優雅」生成前端工程

我平時工作會做移動端H5多一些，所以我通過webpack搭建了自己的前端工程（x-build），主要是編譯stylus、jade、es6，自適應解決方案，還有一些自己寫的一些插件。

做新的項目時，每次複製文件夾，然後修改package.json、README.md等，感覺很不「優雅」，想使用類似vue-cli，使用vue init的方式在github下載我自己的前端工程，這樣顯得很「優雅」。如果您覺得還不錯，請star >>> x-build-cli。

初始化項目結構

首先你已經有了自己搭建的前端工程，假設起名為x-build，並且已經上傳到github。

此時新建一個新的項目，起名為x-build-cli，我是參考vue的做法，這樣即使x-build更新，x-build-cli不更新，也可以拉取到最新的x-build。

mkdir x-build-clicd x-build-clinpm init

創建名為x-build-cli的文件夾，使用npm初始化，在文件夾內創建bin目錄，並創建x-build.js，此時的項目結構：

x-build-cli |- bin | |- x-build.js |- package.json

配置package.json

"bin": { "x-build": "./bin/x-build.js"}

在package.json增加"bin"，"x-build"就是命令號要輸入的指令，"./bin/x-build.js"是命令執行時的文件。

配置x-build.js

#! /usr/bin/env nodeconst program = require(commander);const download = require(download-git-repo);const chalk = require(chalk);const ora = require(ora);

#! /usr/bin/env node是指定這個文件使用node執行。

需要安裝的模塊npm i commander download-git-repo chalk ora --save：

commander可以解析用戶輸入的命令。

download-git-repo拉取github上的文件。

chalk改變輸出文字的顏色

ora小圖標（loading、succeed、warn等）

program .version(0.1.0) .option(-i, init [name], 初始化x-build項目) .parse(process.argv);

.option()

-i 是簡寫，類似於npm i -g

init後面的[name]可以通過program.init來獲取到。

最後一項是描述，一般會在x-build -h提示

if (program.init) { const spinner = ora(正在從github下載x-build).start(); download(codexu/x-build#x-build4.1, program.init, function (err) { if(!err){ // 可以輸出一些項目成功的信息 console.info(chalk.blueBright(下載成功)); }else{ // 可以輸出一些項目失敗的信息 } })}

ora().start()可以創建一個loading小圖標。 >>> 其他圖標參考ora

download()從github下載我們需要的項目，因為使用的是分支所以在後面加上了#x-build4.1，默認是master。 參數配置參考download-git-repo

chalk.blueBright()會將輸出的文字轉化為藍色。 >>> 其他顏色參考chalk

上傳npm

沒有賬號的同學去npm註冊一個賬號。

// 登錄賬號npm login// 上傳項目npm publish

上傳成功之後，通過npm install x-build-cli -g安裝到全局環境中。

使用build init [項目名]就可以從github拉取相應的文件。

優化

此時下載的文件與github一致，我想改變package.json，將name改為初始化的項目名，將version改為1.0.0。

此時就使用node自己的api就可以做到：

const fs = require(fs);fs.readFile(`${process.cwd()}/${program.init}/package.json`, (err, data) => { if (err) throw err; let _data = JSON.parse(data.toString()) _data.name = program.init _data.version = 1.0.0 let str = JSON.stringify(_data, null, 4); fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) { if (err) throw err; })});

通過readFile讀取文件，writeFile寫入文件，寫入時注意要傳入字元串JSON.stringify(_data, null, 4)，通過這樣的方式可以輸出格式化的json文件。

通過node可以很輕鬆的就做到，這裡發展空間很大，就不再多說。

結語

如果有不清楚的小夥伴請在Issues留言，更希望大家可以在我的github點一顆寶貴的star。

其他文章推薦

x-load圖片載入loading控制ES6插件 - 掘金?

juejin.im

rem自適應解決方案·px2rem-loader&hotcss - 掘金?

juejin.im

推薦閱讀：