成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

搭建自己的腳手架—“優(yōu)雅”生成前端工程

luzhuqun / 3091人閱讀

摘要：我平時(shí)工作會(huì)做移動(dòng)端多一些，所以我通過(guò)搭建了自己的前端工程，主要是編譯，自適應(yīng)解決方案，還有一些自己寫(xiě)的一些插件。初始化項(xiàng)目結(jié)構(gòu)首先你已經(jīng)有了自己搭建的前端工程，假設(shè)起名為，并且已經(jīng)上傳到。

我平時(shí)工作會(huì)做移動(dòng)端H5多一些，所以我通過(guò)webpack搭建了自己的前端工程（x-build），主要是編譯stylus、jade、es6，自適應(yīng)解決方案，還有一些自己寫(xiě)的一些插件。

做新的項(xiàng)目時(shí)，每次復(fù)制文件夾，然后修改package.json、README.md等，感覺(jué)很不“優(yōu)雅”，想使用類似vue-cli，使用vue init的方式在github下載我自己的前端工程，這樣顯得很“優(yōu)雅”。如果您覺(jué)得還不錯(cuò)，請(qǐng)star >>> x-build-cli。

初始化項(xiàng)目結(jié)構(gòu)

首先你已經(jīng)有了自己搭建的前端工程，假設(shè)起名為x-build，并且已經(jīng)上傳到github。

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

mkdir x-build-cli
cd x-build-cli
npm init

創(chuàng)建名為x-build-cli的文件夾，使用npm初始化，在文件夾內(nèi)創(chuàng)建bin目錄，并創(chuàng)建x-build.js，此時(shí)的項(xiàng)目結(jié)構(gòu)：

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json
配置package.json 
"bin": {
  "x-build": "./bin/x-build.js"
}

在package.json增加"bin"，"x-build"就是命令號(hào)要輸入的指令，"./bin/x-build.js"是命令執(zhí)行時(shí)的文件。

配置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是指定這個(gè)文件使用node執(zhí)行。

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

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

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

chalk改變輸出文字的顏色

ora小圖標(biāo)（loading、succeed、warn等）

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

.option()

-i 是簡(jiǎn)寫(xiě)，類似于npm i -g

init后面的[name]可以通過(guò)program.init來(lái)獲取到。

最后一項(xiàng)是描述，一般會(huì)在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){
      // 可以輸出一些項(xiàng)目成功的信息
      console.info(chalk.blueBright("下載成功"));
    }else{
      // 可以輸出一些項(xiàng)目失敗的信息
    }
  })
}

ora().start()可以創(chuàng)建一個(gè)loading小圖標(biāo)。 >>> 其他圖標(biāo)參考o(jì)ra

download()從github下載我們需要的項(xiàng)目，因?yàn)槭褂玫氖欠种栽诤竺婕由狭?b>#x-build4.1，默認(rèn)是master。 參數(shù)配置參考download-git-repo

chalk.blueBright()會(huì)將輸出的文字轉(zhuǎn)化為藍(lán)色。 >>> 其他顏色參考chalk

上傳npm

沒(méi)有賬號(hào)的同學(xué)去npm注冊(cè)一個(gè)賬號(hào)。

// 登錄賬號(hào)
npm login
// 上傳項(xiàng)目
npm publish

上傳成功之后，通過(guò)npm install x-build-cli -g安裝到全局環(huán)境中。

使用build init [項(xiàng)目名]就可以從github拉取相應(yīng)的文件。

優(yōu)化

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

此時(shí)就使用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;
  })
});

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

通過(guò)node可以很輕松的就做到，這里發(fā)展空間很大，就不再多說(shuō)。

結(jié)語(yǔ)

如果有不清楚的小伙伴請(qǐng)?jiān)贗ssues留言，更希望大家可以在我的github點(diǎn)一顆寶貴的star。

其他文章推薦

x-loader.js圖片加載loading控制ES6插件

rem自適應(yīng)解決方案·px2rem-loader&hotcss

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95181.html

相關(guān)文章

  • 從零開(kāi)始搭建自己的前端腳手架（一）

    摘要：以下閱讀將花費(fèi)分鐘前言日常開(kāi)發(fā)中，我們都只專注在業(yè)務(wù)上的開(kāi)發(fā)，拿起一套開(kāi)箱即用的模板項(xiàng)目就直接開(kāi)搞了，不知道大家有沒(méi)有思考過(guò)，平時(shí)我們使用的腳手架里面到底做了什么，并且如果是自己來(lái)搭一套腳手架，應(yīng)該怎么去搭呢在本博客中，將記錄作者搭建腳手架 （以下閱讀將花費(fèi)10分鐘） 前言 日常開(kāi)發(fā)中，我們都只專注在業(yè)務(wù)上的開(kāi)發(fā)，拿起一套開(kāi)箱即用的模板項(xiàng)目就直接開(kāi)搞了，不知道大家有沒(méi)有思考過(guò)，平時(shí)我們...

    gxyz 評(píng)論0 收藏0

  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

    simon_chen 評(píng)論0 收藏0

  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

    curlyCheng 評(píng)論0 收藏0

  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

    xi4oh4o 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<