如何自己搭一個(gè)腳手架

jlanglang 發(fā)布于2019-08-23 13:08 / 1799人閱讀

摘要：二賬號(hào)注冊(cè)賬號(hào)登錄添加用戶(hù)信息到注冊(cè)表主體內(nèi)容寫(xiě)代碼準(zhǔn)備工作做齊了，開(kāi)始打開(kāi)終端，初始化項(xiàng)目這個(gè)是一個(gè)簡(jiǎn)單的腳手架張?chǎng)芜@個(gè)是一個(gè)簡(jiǎn)單的腳手架張?chǎng)雾?xiàng)目的結(jié)構(gòu)就基本出來(lái)了。

前言

做前端也有三四年了，自己帶了個(gè)五人前端小團(tuán)隊(duì)，第一次寫(xiě)腳手架，也是第一次寫(xiě)分享文章。文筆太差，勿噴、勿噴、勿噴    
每次人肉搬運(yùn)代碼的時(shí)候，就想自己能不能給團(tuán)隊(duì)做一個(gè)跟vue-cli一樣的腳手架？想了很久，苦于各種原因一直沒(méi)有實(shí)施。
正好最近不忙，此時(shí)不搞，更待何時(shí)！開(kāi)搞，網(wǎng)上查文檔，gitHub扒vue-cli的源碼，坑哧吭哧的搗鼓了兩天……成了。拿出來(lái)分享一下吧。

準(zhǔn)備工作 一、gitHub新建組織和倉(cāng)庫(kù)

這個(gè)不難，一張圖概括，按照提示步驟填寫(xiě)信息就好了。如下圖，我創(chuàng)建了一個(gè)叫template-organization的組織。

組織創(chuàng)建完之后，就可以在template-organization這個(gè)組織下創(chuàng)建新的倉(cāng)庫(kù)demo-template

重點(diǎn)來(lái)了，https://api.github.com/users/...,獲取template-organization這個(gè)組織下的所有倉(cāng)庫(kù)信息。

二、npm賬號(hào)

** 注冊(cè)賬號(hào)：** 
    [https://www.npmjs.com/][2]
** 登錄： ** 
    npm login
** 添加用戶(hù)信息到注冊(cè)表 ** 
    npm adduser

主體內(nèi)容 寫(xiě)代碼

準(zhǔn)備工作做齊了，開(kāi)始coding……

 打開(kāi)終端，初始化項(xiàng)目

$ `mkdir edu-test-cli`
$ `cd edu-test-cli/`
$ `npm init`
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (edu-test-cli) 
version: (1.0.0) 
description: 這個(gè)是一個(gè)簡(jiǎn)單的腳手架
entry point: (index.js) 
test command: 
git repository: 
keywords: cli edu zhx
author: 張?chǎng)?license: (ISC) MIT
About to write to /Users/zhangxin/study/edu-test-cli/package.json:

{
  "name": "edu-test-cli",
  "version": "1.0.0",
  "description": "這個(gè)是一個(gè)簡(jiǎn)單的腳手架",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "cli",
    "edu",
    "zhx"
  ],
  "author": "張?chǎng)?,
  "license": "MIT"
}


Is this ok? (yes) yes

項(xiàng)目的package.json結(jié)構(gòu)就基本出來(lái)了。

 加入依賴(lài)的包

npm i chalk commander download-git-repo inquirer ora request --save

 修改package.json中配置，如下

{
  "name": "edu-test-cli",
  "version": "1.0.0",
  "description": "這個(gè)是一個(gè)簡(jiǎn)單的腳手架",
  "preferGlobal": true,
  "bin": {
    "edu": "bin/edu"
  },
  "dependencies": {
    "chalk": "^1.1.3",
    "commander": "^2.9.0",
    "download-git-repo": "^1.1.0",
    "inquirer": "^6.2.0",
    "ora": "^3.0.0",
    "request": "^2.88.0"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "cli",
    "edu",
    "zhx"
  ],
  "author": "張?chǎng)?,
  "license": "MIT"
}

 項(xiàng)目結(jié)構(gòu)，如下

>edu-test-cli
    |--bin
       |--edu
    |--lib
       |--list.js
       |--init.js
    |--package.json
    |--README.md

在bin目錄下新建 edu (沒(méi)有后綴),代碼如下

#!/usr/bin/env node
process.env.NODE_PATH = __dirname + "/../node_modules/"

const program = require("commander")

program
  .version(require("../package.json").version)
  .usage(" [options]")
program
  .command("list")
  .description("查看所有的模版")
  .alias("l")
  .action(() => {
    require("../lib/list")()
  })
program
  .command("init")
  .description("生成一個(gè)新項(xiàng)目")
  .alias("i")
  .action(() => {
    require("../lib/init")()
  })
program
  .parse(process.argv)

if(!program.args.length){
  program.help()
}

lib目錄下 init.js，代碼如下

const ora = require("ora")
const inquirer = require("inquirer")
const chalk = require("chalk")
const request = require("request")
const download = require("download-git-repo")

module.exports = () => {
  request({
    url: "https://api.github.com/users/template-organization/repos",
    headers: {
      "User-Agent": "edu-test-cli"
    }
  }, (err, res, body) =>{
    if (err) {
      console.log(chalk.red("查詢(xún)模版列表失敗"))
      console.log(chalk.red(err))
      process.exit();
    }

    const requestBody = JSON.parse(body)
    if (Array.isArray(requestBody)) {
      let tplNames = [];
      requestBody.forEach(repo => {
        tplNames.push(repo.name);
      })

      let promptList = [
        {
          type: "list",
          message: "請(qǐng)選擇模版",
          name: "tplName",
          choices: tplNames
        },
        {
          type: "input",
          message: "請(qǐng)輸入項(xiàng)目名字",
          name: "projectName",
          validate (val) {
            if (val !== "") {
              return true
            }
            return "項(xiàng)目名稱(chēng)不能為空"
          }
        }
      ]
      inquirer.prompt(promptList).then(answers => {

        let ind = requestBody.find(function (ele) {
          return answers.tplName == ele.name;
        });
        let gitUrl = `${ind.full_name}#${ind.default_branch}`,
          defaultUrl = "./",
          projectUrl = `${defaultUrl}/${answers.projectName}`,
          spinner = ora("
 開(kāi)始生成項(xiàng)目，請(qǐng)等待...");
          spinner.start();
        download(gitUrl, projectUrl, (error)=>{
          spinner.stop();
          if (error) {
            console.log("模版下載失敗……")
            console.log(error)
            process.exit()
          }
          console.log(chalk.green(`
 √ ${answers.projectName} 項(xiàng)目生成完畢!`))
          console.log(`
 cd ${answers.projectName} && npm install 
`)
        })
      })
    } else {
      console.error(requestBody.message)
    }
  })
}

lib目錄下的 list.js，代碼如下：

const request = require("request");
const chalk = require("chalk")
const ora = require("ora")
module.exports = () => {
  let spinner = ora("
 " + chalk.yellow("正在查詢(xún)模版列表，請(qǐng)等待..."));
  spinner.start();
  request({
    url: "https://api.github.com/users/template-organization/repos",
    headers: {
      "User-Agent": "edu-test-cli"
    }
  }, (err, res, body) => {
    spinner.stop();
    if (err) {
      console.log(chalk.red("查詢(xún)模版列表失敗"))
      console.log(chalk.red(err))
      process.exit();
    }
    const requestBody = JSON.parse(body)
    if (Array.isArray(requestBody)) {
      console.log()
      console.log(chalk.green("可用的模版列表："))
      console.log()
      requestBody.forEach(repo => {
        console.log(
        "  " + chalk.yellow("★") +
        "  " + chalk.blue(repo.name) +
        " - " + repo.description)
      })
    } else {
      console.error(requestBody.message)
    }
  })
}

到這里這個(gè)簡(jiǎn)單的腳手架就開(kāi)發(fā)完了。代碼都在這里，是不是很簡(jiǎn)單呢？

開(kāi)發(fā)、測(cè)試、發(fā)布

 開(kāi)發(fā)時(shí)，可使用以下命令查看效果

node bin/edu list   查看所有可用的模版
node bin/edu init   把模版下載下來(lái)，作為初始項(xiàng)目進(jìn)行開(kāi)發(fā)

測(cè)試時(shí)，如何使用全局的 edu list/init 的命令呢？

npm link    ///只能自己本地使用。

 開(kāi)發(fā)、測(cè)試完成，發(fā)布

npm publish  ///將包發(fā)布到npm上，所有人都可以安裝使用。

例子：
edu-test-cli> $ npm publish
+ [email protected]

使用方法

 安裝

npm install -g edu-test-cli

 查看模版列表

$ edu list

可用的模版列表：

  ★  demo-template - 這是一個(gè)關(guān)于移動(dòng)端適配方案的示例項(xiàng)目。

 創(chuàng)建項(xiàng)目

$ edu init
? 請(qǐng)選擇模版 (Use arrow keys)
? demo-template 
  
? 請(qǐng)輸入項(xiàng)目名字

結(jié)尾

終于寫(xiě)完了。寫(xiě)文章比寫(xiě)代碼還累。。。。。。

云服務(wù)器 GPU云服務(wù)器如何買(mǎi)vps然后自己搭如何搭自己的云服務(wù)器如何自己建一個(gè)網(wǎng)站如何給自己開(kāi)一個(gè)網(wǎng)站

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

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

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

登陸后可評(píng)論

0條評(píng)論

jlanglang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

學(xué)習(xí)記錄：軟件測(cè)試的最常見(jiàn)的誤解

閱讀 647·2021-09-22 10:02
寶塔面板windows版 7.2.0 開(kāi)心版安裝(寶塔windows面板企業(yè)版、專(zhuān)業(yè)版)

閱讀 6411·2021-09-03 10:49
或隱藏近10年惠普警告Sudo漏洞給予攻擊者Aruba平臺(tái)Root權(quán)限

閱讀 572·2021-09-02 09:47
css-選擇器

閱讀 2158·2019-08-30 15:53
前端面試每日 3+1 —— 第132天

閱讀 2936·2019-08-30 15:44
純CSS實(shí)現(xiàn)對(duì)白框

閱讀 909·2019-08-30 13:20
【靜態(tài)頁(yè)面架構(gòu)】CSS之鏈接和圖像

閱讀 1823·2019-08-29 16:32
六邊形塊級(jí)元素的繪制

閱讀 896·2019-08-29 12:46

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

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

如何自己搭一個(gè)腳手架

相關(guān)文章

如何構(gòu)建大型的前端項(xiàng)目

如何構(gòu)建大型的前端項(xiàng)目

ELSE 技術(shù)周刊(2017.11.20期)

前端之從零開(kāi)始系列

**從 0 到 1 再到 100, 搭建、編寫(xiě)、構(gòu)建一個(gè)前端項(xiàng)目**

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

0條評(píng)論

jlanglang

男|高級(jí)講師

TA的文章

學(xué)習(xí)記錄：軟件測(cè)試的最常見(jiàn)的誤解

寶塔面板windows版 7.2.0 開(kāi)心版安裝(寶塔windows面板企業(yè)版、專(zhuān)業(yè)版)

或隱藏近10年惠普警告Sudo漏洞給予攻擊者Aruba平臺(tái)Root權(quán)限

css-選擇器

前端面試每日 3+1 —— 第132天

純CSS實(shí)現(xiàn)對(duì)白框

【靜態(tài)頁(yè)面架構(gòu)】CSS之鏈接和圖像

六邊形塊級(jí)元素的繪制

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

如何自己搭一個(gè)腳手架

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！