国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始搭建自己的前端腳手架（一）

gxyz / 1670人閱讀

摘要：以下閱讀將花費分鐘前言日常開發中，我們都只專注在業務上的開發，拿起一套開箱即用的模板項目就直接開搞了，不知道大家有沒有思考過，平時我們使用的腳手架里面到底做了什么，并且如果是自己來搭一套腳手架，應該怎么去搭呢在本博客中，將記錄作者搭建腳手架

（以下閱讀將花費10分鐘）

前言

日常開發中，我們都只專注在業務上的開發，拿起一套開箱即用的模板項目就直接開搞了，不知道大家有沒有思考過，平時我們使用的腳手架里面到底做了什么，并且如果是自己來搭一套腳手架，應該怎么去搭呢？

在本博客中，將記錄作者搭建腳手架的過程，整體將分為兩個部分，第一部分是cli的搭建，第二部分是模板項目的搭建；

cli的搭建

在搭建腳手架cli之前，我們首先思考一下，一個cli，需要什么能力呢？答案是初始化能力，那么初始化的功能需要怎樣去實現呢，這里，我們先梳理一下思路。

思路

我們在使用其他cli時，會發現，它們有問詢的功能，比如詢問項目名稱，項目描述等；然后還可以選擇模板項目將要使用什么css預處理器等的問題；所以，cli首先就要具備問詢功能，用以獲取定制化信息；
問詢結束后，我們的cli會獲得即將創建的項目的基本信息，接下來我們就需要以一個模板項目作為模板去創建，模板項目將會在第二部分講解，這里一筆帶過~；OK，既然有了模板項目，cli就需要下載這個項目，然后復制這個項目，同時將前面問詢所得的定制化信息寫入項目配置中，所以cli還需要有下載和復制，寫入模板功能；
到此，一個模板項目基本已經創建成功了，那后面我們還希望腳手架可以幫忙進行git初始化以及安裝依賴的功能，所以最終，還需要添加git初始化和安裝依賴的功能；
總結一下，實現一個cli的初始化功能我們需要有如下能力：
問詢 ==> 下載模板 ==> 復制，寫入模板 ==> git初始化 ==> 安裝依賴

準備

好了，為了實現上述思路，cli將會引入如下依賴去實現對應的功能：

const program = require("commander");  // commander負責讀取命令
const inquirer = require("inquirer");   // inquirer負責問詢
const download = require("download-git-repo");   // download-git-repo負責下載對應模板項目的git倉庫
const fse = require("fs-extra");   // fs-extra負責文件的復制
const memFs = require("mem-fs");
const editor = require("mem-fs-editor");   // mem-fs-editor負責模板的復制以及嵌入模板字符串，它需要依賴mem-fs
const { exec } = require("child_process");   // child_process負責執行命令行

當然除了上述必須的依賴外，為了更好的交互體驗，還引入了如下依賴：

const chalk = require("chalk");   // 改變命令行輸出樣式
const ora = require("ora");   // 一個優雅地命令行交互spinner

至此，準備的工作已經完畢，下面，就開始一步步來編寫cli了

cli的編寫

萬事開頭難，有了思路后，實現思路才是真正的開始，下面將介紹如何組織cli項目

項目組織

首先看一下，工程的組織

├── bin                   
|   ├── begin
|   ├── begin-init 
├── src                   
|   ├── constants.js     
|   ├── project.js         
|   └── utils.js              
├── .gitignore                   
├── .npmrc
├── README.md
└── package.json
第一步，解析命令

在bin/begin中引入commander，并且聲明init命令，commander會在同級目錄中尋找begin-init文件

const program = require("commander");

program
  .usage(" [options]")
  .command("init [name]", "init a project")
  .parse(process.argv);
第二步，問詢

有了第一步的解析后，我們可以在begin-init文件中編寫創建邏輯，這里，我們再抽象project文件到src目錄底下，以便更好地分離職責，bin文件只負責解析命令就好啦~
下面就看看project文件中，如何實現問詢

inquirer.prompt([{
      type: "input",
      name: "projectName",
      message: "請輸入項目名：",
      validate(input) {
        if (!input) {
          return "項目名不能為空";
        }
        if (fse.existsSync(input)) {
          return "當前目錄已存在同名項目，請更換項目名";
        }
        return true;
      }
    }]);

inquirer提供prompt函數來實現問詢，其參數為數組，問詢順序將按照數組的順序來進行；

第三步，下載倉庫

在問詢結束后，我們基本知道需要創建的項目的名稱、描述等信息了，下一步，就是下載倉庫了，下面我們來看看核心代碼：

const downloadPath = path.join(projectPath, "__download__");
download(TEMPLATE_GIT_REPO, downloadPath, { clone: true }, (err) => {
  // 拷貝
  // 此處省略若干代碼
  // 拷貝完成后刪除臨時文件
  fse.remove(downloadPath);
}

這里需要注意的是，模板工程所在的倉庫，即TEMPLATE_GIT_REPO，最好是public的

第四步，復制文件，將信息寫入模板

下載倉庫只是把模板工程存放在一個臨時文件夾內，真正的工程文件需要等信息寫入模板后再生成；
這里需要注意的是，模板寫入時遵循ejs規范

const memFs = require("mem-fs");
const editor = require("mem-fs-editor");

// 這里需要mem-fs進行內存優化
const store = memFs.create();
this.memFsEditor = editor.create(store);

// 這里source表示源文件，dest表示目標文件，data表示需要寫入的數據
this.memFsEditor.copyTpl(
  source,
  dest,
  data
);

在調用copyTpl時，data字段中的key-value將被寫入到模板中，舉個栗子：

// 模板文件中，字段是這樣的
{
  name: "<%= projectName %>"
}

// data就要這樣去寫
{
  projectName: "this is your project name"
}
第五步，進行git init和npm install

這兩步的核心都是使用nodejs提供的child_process中exec方法去執行命令來實現，exec能幫助我們在命令行中執行shell命令，exec函數有對應的回調方法來讓我們判斷命令執行是否成功，核心代碼如下：

exec("npm install", (error, stdout, stderr) => {
  if (error) {
    // 出錯了
  } else {
    // 成功了
  }
})

是不是很簡單呢，想了解更多的操作可以搜索官方文檔查看哈，這里就不詳解了。

調試和發布

到這里，我們的cli已經實現的差不多了，這里我們總結一下如何測試和發布吧

npm link  // 本地調試
npm publish  // 發布

通過npm link命令，即可以在命令行工具測試你的cli了，注意在package.json的bin字段中定義好入口命令和文件

// package.json
{
  "bin": {
    "begin": "bin/begin"
  }
}
小結

OK，文章主要總結了編寫一個腳手架中init功能的思路以及一些實現的方法，具體一些細節仍有優化的空間，歡迎大家討論！
文章的具體代碼可以參考我的倉庫begin-cli

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105170.html

相關文章

  • 前端之從零開始系列

    摘要：只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中項目地址求求求源碼系列跟一起學如何寫函數庫中高級前端面試手寫代碼無敵秘籍如何用不到行代碼寫一款屬于自己的類庫原理講解實現一個對象遵循規范實戰手摸手，帶你用擼 Do it yourself!!! 只有動手，你才能真的理解作者的構思的巧妙 只有動手，你才能真正掌握一門技術 持續更新中…… 項目地址 https...

    Youngdze 評論0 收藏0

  • 從零開始搭建Vue組件庫——VV-UI

    摘要：各個大廠也相繼宣布開源。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們想自己開發一套屬于自己的組件庫，來增強對組件的可控性。 前言： 前端組件化是當今熱議的話題之一，也是我們在開發單頁應用經常會碰到的一個問題，現在我們有了功能非常完善的Element-UI。各個大廠也相繼宣布開源XXX-UI。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們...

    BothEyes1993 評論0 收藏0

  • 從零開始搭建Vue組件庫——VV-UI

    摘要：各個大廠也相繼宣布開源。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們想自己開發一套屬于自己的組件庫，來增強對組件的可控性。 前言： 前端組件化是當今熱議的話題之一，也是我們在開發單頁應用經常會碰到的一個問題，現在我們有了功能非常完善的Element-UI。各個大廠也相繼宣布開源XXX-UI。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們...

    wthee 評論0 收藏0

  • 為什么我不推薦你使用vue-cli創建腳手架？

    摘要：后來經過排查你會發現是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創建腳手架的原因此文的受眾是想要進階中級的初級前端人員。 最近在知乎看到一個問題，原問題如下： 很奇怪，為什么現在能找到自己手動創建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做...

    trigkit4 評論0 收藏0

  • 《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

    摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。 什么是 CLI 命令行界面（英語：command-li...

    qieangel2013 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<