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

codexu發表於2018-05-19
前端

我平時工作會做移動端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-cli
cd x-build-cli
npm 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 node

const 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可以很輕鬆的就做到，這裡發展空間很大，就不再多說。

結語

這是我自己搭建的腳手架工具x-build,大家可以參考這個原始碼或者使用它。

相關文章