資訊專欄INFORMATION COLUMN
摘要：我平時工作會做移動端多一些，所以我通過搭建了自己的前端工程，主要是編譯，自適應解決方案，還有一些自己寫的一些插件。初始化項目結構首先你已經有了自己搭建的前端工程，假設起名為，并且已經上傳到。
我平時工作會做移動端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可以很輕松的就做到，這里發展空間很大，就不再多說。
結語如果有不清楚的小伙伴請在Issues留言，更希望大家可以在我的github點一顆寶貴的star。
其他文章推薦x-loader.js圖片加載loading控制ES6插件
rem自適應解決方案·px2rem-loader&hotcss
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95181.html
摘要：以下閱讀將花費分鐘前言日常開發中，我們都只專注在業務上的開發，拿起一套開箱即用的模板項目就直接開搞了，不知道大家有沒有思考過，平時我們使用的腳手架里面到底做了什么，并且如果是自己來搭一套腳手架，應該怎么去搭呢在本博客中，將記錄作者搭建腳手架 （以下閱讀將花費10分鐘） 前言 日常開發中，我們都只專注在業務上的開發，拿起一套開箱即用的模板項目就直接開搞了，不知道大家有沒有思考過，平時我們...
摘要：前言是現階段很流行的前端框架，很多人通過官方文檔的學習，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程對 前言 vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎...
摘要：前言是現階段很流行的前端框架，很多人通過官方文檔的學習，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程對 前言 vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎...
摘要：前言是現階段很流行的前端框架，很多人通過官方文檔的學習，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程對 前言 vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎...
閱讀 925·2021-11-16 11:45
閱讀 2132·2021-10-09 09:44
閱讀 1349·2019-08-30 14:03
閱讀 1134·2019-08-26 18:28
閱讀 3335·2019-08-26 13:50
閱讀 1721·2019-08-23 18:38
閱讀 3456·2019-08-23 18:22
閱讀 3597·2019-08-23 15:27
