使用 Coding.net 提供的服務搭建項目的組件倉庫

背景

咱們公司目前開發的項目是使用 Vue 搭建的後臺管理應用.
隨着同質的項目慢慢的變多, 原先維護在一個項目裏的組件在其餘項目也會用到, 而組件會隨着業務的要求, 進行相應的升級和修改. 這就致使修改一個組件須要同步代碼到其餘項目. 因此很是須要一個組件倉庫的存在, 將本身的通用組件和通用的業務組件統一放在一個地方, 在各個項目經過 npm 的方式去進行版本管理.

搜尋了一些解決方案, 咱們團隊把方案定在了使用 Coding.net 提供的服務 + Lerna 來實現咱們的組件倉庫的搭建.

Coding

先說說 Coding.

爲何咱們不選擇租用服務器, 搭建私有的 npm 倉庫呢. 主要由於(界面好看)集成了咱們須要的全部服務, 包括(但不限於)代碼託管/製品庫/方便權限管理/比較好的交互體驗/私有庫/免費?.

關於付費問題, 官網的價格策略是說 5 人如下團隊免費, 我想能夠知足不少小團隊的需求了. 可是免費用戶只能建立 20 個項目, 對於有不少組件的項目, 若是代碼都要託管, 那確定不夠, 因此就有了 Lerna 的登場, 把全部組件整合在一個項目裏面, 還能獨立發佈組件.

步驟：

• 註冊 codeing 帳號 並創建對應的項目

  • 省略

• 建立項目

  • 省略

• 建立 Coding 的製品庫

  • 項目設置->功能開關->製品庫 啓用
  • 製品庫->新建
  • 打開製品庫的指引選項卡, 按教程配置

• 建立好製品庫後, 要配置本地的 npm 與咱們的製品庫關聯

  • npm config get registry => https://registry.npmjs.org/
  • yarn config get registry => https://registry.yarnpkg.com
  • npm config set registry=(你的製品庫地址)

  • 項目設置->開發者選項->項目令牌, 建立新的代碼倉庫的帳戶;

    • 查看當前登陸的用戶 npm whoami
    • 在控制檯, 使用 npm login 登陸剛剛建立的用戶
  • 或者使用 使用訪問令牌生成配置 (推薦使用)

Lerna 的相關操做

這裏就省略了Lerna的介紹了, 網絡上能夠查的到

Lerna 的經常使用命令:

lerna init #初始化
lerna bootstrap #下載依賴包或者生成本地軟鏈接
lerna add axios #全部包都添加axios
lerna add packageB --scope=packageA # 添加依賴 / packageA 生成了node_modules，而node_modules裏生成了指向 packageB 的軟鏈，相似npm link的效果
lerna publish
lerna list
lerna clean

本身的項目中lerna.json的配置

{
  "packages": [
    "packages/*" // 要發佈的包的路徑
  ],
  "command": {
    "publish": {
      "ignoreChanges": [
        "ignored-file",
        "*.md", // 咱們團隊的約定: 更新說明文檔不算爲組件更新
        "package.json" // 每次更新版本後都會致使修改版本號的這個文件變成未提交, 因此排除
      ]
    }
  },
  "version": "independent" // 包獨立發佈
}

到此, 咱們建立新的組件或者更新組件就能夠這樣作:

• 先提交本身的代碼到 git 倉庫
• 執行 lerna publish 根據須要修改版本好

就能夠把本身的組件發佈到 Coding 的製品庫了

在目標的項目下面:

• npm i 目標包名 --registry=製品庫地址(若是已經全局配置就能夠省略)

組件倉庫項目

這裏還有一個問題就是組件的調試問題.
方法一: 使用 npm link 把包關聯到目標項目來調試
方法二: 在項目裏面添加一個測試的環境

項目的目錄及說明以下:

├─ packages // 組件源文件
| ├─ CSelect
| | ├─  components // 子組件
| | ├─  package.json // 組件描述文件
| | ├─  index.js // 組件入口
| | ├─  c-select.vue
| | └─  README.md // 文檔
├─ public
| ├─  index.html
| └─  favicon.ico
├─ src // 測試項目源文件
| ├─ assets
| | └─  logo.png
| ├─ components
| | ├─ CodeEditor // 使用了一個所見即所得的代碼編輯器, 使得項目部署後方便調試不一樣的參數
| | | ├─  index.js
| | | └─  CodeEditor.vue
| ├─ router
| | └─  index.js
| ├─ styles
| | ├─  index.scss
| | └─  element-ui.scss
| ├─ utils
| | ├─  index.js
| | └─  api.js
| ├─ views
| | ├─ examples
| | | ├─ c-select
| | | | ├─  index.vue
| | | | └─  code.js
| | └─  Home.vue
| ├─  main.js
| └─  App.vue
├─  vue.config.js
├─  package.json
├─  lerna.json
├─  babel.config.js
├─  README.md
├─  .npmrc
├─  .gitignore
├─  .eslintrc.js
├─  .browserslistrc
└─  .DS_Store

項目地址

使用 npm link 在項目中調試

npm link的使用

結尾

大家的團隊是否也須要一個組件倉庫, 若是沒有其餘方案, 這個方案能夠嘗試下, 祝你能愉快的玩耍 (手動滑稽~)