【手把手帶你擼一個腳手架】第五步, 擼完收工

圈圈Dei圈發表於2018-11-16

系列文章:

拿到 git 專案資訊是重要的一個環節. 然而, 只能拿到資訊不能下載下來, 你這腳手架有個?用.

2018-11-16-18-03-58

這一節, 我們就開始把 git 專案下載下來. 並且把完成的程式碼釋出到 npmjs.com 上, 掌握核心科技, 服務全球碼農 ?

首先安裝依賴 download-git-repo

npm install download-git-repo -S
複製程式碼

擴充 Git 操作類

  • 完善 Git 類的 downloadProject 方法:
downloadProject({ repo, version, repoPath }) {
    return new Promise((resolve, reject) => {
        download(`${this.orgName}/${repo}#${version}`, repoPath, (err) => {
        if (err) reject(err);
        resolve(true);
        });
    });
}
複製程式碼

這裡引入了 download-git-repo, 推薦小夥伴們研究一下 官方文件

  • 優化 command/download.js 檔案,
// 向使用者諮詢欲建立專案的目錄
const repoName = [
    {
    type: 'input',
    name: 'repoPath',
    message: '請輸入專案名稱: ',
    validate(v) {
        const done = this.async();
        if (!v.trim()) {
        done('專案名稱不能為空~');
        }
        done(null, true);
    },
    },
];
const { repoPath } = await this.inquirer.prompt(repoName);

// 下載程式碼到指定的目錄下
try {
    downLoadLoad = this.downLoad.start();
    await this.git.downloadProject({ repo, version, repoPath });
    downLoadLoad.succeed('下載程式碼成功');
} catch (error) {
    console.log(error);
    downLoadLoad.fail('下載程式碼失敗...');
}
複製程式碼

增加了向使用者詢問專案開發目錄和呼叫程式碼下載功能的邏輯. 至此, 我們已經可以正常的下載模板程式碼啦.不信試試 ^_^

success

現在的程式碼 github已經實現了程式碼庫下載功能, 但是細心的小夥伴不難發現, 程式碼只能下載到腳手架的專案目錄下這是搞什麼鬼, 難道是所有的專案都要在腳手架專案下開發? 當然不是. 接下來我們就把我們的腳手架釋出到npmjs.com上.

將程式碼釋出到 npm 上

  • 首先, 建立 npmjs 賬號, 這個我這裡就不說了吧, 碩大的 Sign up 擺在了首頁右上角, 這一波, 你不會算(ping)我(lun)輸(qu) ?

  • 其次, 登入 npm 官網, 驗證賬號沒有問題

  • 再次, 把 npm 映象替換為官方映象 重點要考

    npm config set registry http://registry.npmjs.org
複製程式碼

    當然, 替換成官方映象會很慢很慢, 這裡我有一個建議那就是---耐心等待.極客小夥伴們也可以在發包完成後執行下面的語句, 把映象替換為淘寶映象速度快的飛起.

    npm config set registry https://registry.npm.taobao.org
複製程式碼

  • 最後, 來一把 npm publish 結果如下圖:

    2018-11-16-21-41-07
    沒有任何意外的報錯了, 但是通過看報錯資訊, 這是要讓我們登入還給出了登入的命令, npm 的設計還是蠻夠意思的 ^_^
    2018-11-16-21-44-06

  • 根據報錯資訊, 執行 npm adduser

    2018-11-16-21-48-05
    這裡給大家分享一下, 如果沒有改映象地址的話, 就會的在登入的時候報這個錯.
    2018-11-16-21-49-33
    正常的登入操作是這個樣子的 ^_^

  • 最後, 這次是真的最後, 成功登入完成的最後, 我們再次執行 npm publish 結果如下圖:

    2018-11-16-21-51-13

  • 通過瀏覽器訪問 npmjs.com 並登入, 按照如下所示的方式就可以找到我們剛剛上傳的程式碼包啦 ?

  • 最後一步, 驗證成果....

    • 命令列執行 npm i learn-cli -g 全域性安裝 learn-cli
    • 下來的步驟如圖:
      yanzheng123432

到目前為止, 初級腳手架開發已經完成, 如果有小夥伴又任何疑問,請評論區和我交流喲.

2018-11-16-22-06-10

後記

之前工作中業務繁雜, 各種邏輯需要寫各種輪子需要抄, 結果需求無限, 但是腦容量有限, 所以就存在今天寫了很牛逼的程式碼, 明天忘了怎麼寫的啦,這個迭代搭建了一套很好的開發模板, 下次迭代還要重新搭建. 各種操蛋配置(webpack 我沒說你 ?). 反反覆覆很沒意思, 所以就萌生了搞一個腳手架的想法, 一次配置, 一家公司週期內有效. 很好使 ^_^

learn-cli v0.0.2 已經能滿足大部分需求, 但是還存在不少可以優化的地方, 比如沒有 readMe, 可以一次 download 把專案模板直接放在本地, 以後初始化專案直接從本地拷貝模板等等等等, 畢竟學無止境, 但時間有限, 我也歡迎小夥伴們的 PR, 讓我們一起來搞一款我們喜歡的也是我們自己的腳手架

第一次寫系列文章, 結果一寫就停不下來了 ?. 接下來計劃寫一個介面測試工具系列. 就是那種常見的 http 介面測試工具. 也是我很久以前就答應一個很好很好的小夥伴一起學習的一個專案.

技術選型:

前端: vue.js

後端: java

後端有 node php python 為啥要用 java 呢? 哈哈因為前幾種我都會啦 ^_^, 歡迎小夥伴們和我一起學習 here we go

2018-11-16-22-24-29

相關文章