使用 Coding.net 提供的服务搭建项目的组件仓库

背景

咱们公司目前开发的项目是使用 Vue 搭建的后台管理应用.
随着同质的项目慢慢的变多, 原先维护在一个项目里的组件在其余项目也会用到, 而组件会随着业务的要求, 进行相应的升级和修改. 这就致使修改一个组件须要同步代码到其余项目. 因此很是须要一个组件仓库的存在, 将本身的通用组件和通用的业务组件统一放在一个地方, 在各个项目经过 npm 的方式去进行版本管理.

搜寻了一些解决方案, 咱们团队把方案定在了使用 Coding.net 提供的服务 + Lerna 来实现咱们的组件仓库的搭建.

Coding

先说说 Coding.

为何咱们不选择租用服务器, 搭建私有的 npm 仓库呢. 主要由于(界面好看)集成了咱们须要的全部服务, 包括(但不限于)代码托管/制品库/方便权限管理/比较好的交互体验/私有库/免费?.

关于付费问题, 官网的价格策略是说 5 人如下团队免费, 我想能够知足不少小团队的需求了. 可是免费用户只能建立 20 个项目, 对于有不少组件的项目, 若是代码都要托管, 那确定不够, 因此就有了 Lerna 的登场, 把全部组件整合在一个项目里面, 还能独立发布组件.

步骤：

• 注册 codeing 帐号 并创建对应的项目
  • 省略
• 建立项目
  • 省略
• 建立 Coding 的制品库
  • 项目设置->功能开关->制品库 启用
  • 制品库->新建
  • 打开制品库的指引选项卡, 按教程配置
• 建立好制品库后, 要配置本地的 npm 与咱们的制品库关联
  • npm config get registry => registry.npmjs.org/
  • yarn config get registry => 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的使用

结尾

大家的团队是否也须要一个组件仓库, 若是没有其余方案, 这个方案能够尝试下, 祝你能愉快的玩耍 (手动滑稽~)