前端專案中初始化專案結構
- php中世界最好的语言原創
- 2018-05-24 15:59:282013瀏覽
這次帶給大家前端專案中初始化專案結構，前端專案中初始化專案結構的注意事項有哪些，以下就是實戰案例，一起來看一下。
我平常工作會做手機端H5多一些，所以我透過webpack搭建了自己的前端工程（x-build），主要是編譯stylus、jade、es6，自適應解決方案，還有一些自己寫的一些插件。
做新的專案時，每次複製資料夾，然後修改package.json、README.md等，感覺很不“優雅”，想使用類似vue-cli，使用vue init的方式在github下載我自己的前端工程，這樣顯得很「優雅」。
初始化專案結構
首先你已經有了自己搭建的前端工程，假設取名為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
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是前端專案中初始化專案結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！