如何使用 NPM 和 GitLab 管理安装私有前端公共库

如何使用 NPM 和 GitLab 管理安装私有前端公共库
Photo by Alfons Morales / Unsplash

企业内部前端代码复用通常使用自建 NPM Registry 实现,然而这种使用方式需要相对完善的基础设施建设。

这里推荐一种短平快的使用方式,即使用 GitLab 进行私有前端公共库管理,并且简单记录一下如何将其安装到实际项目里去。

创建项目

我们创建一个 hello-world 公共库项目,然后在其中使用 npm init 初始化一个 package.json 文件,内容参考如下。

{
  "name": "hello-world",
  "version": "1.0.0",
  "private": true,
  "description": "Hello World",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git@git.example.com:bayunjiang/hello-world.git"
  },
  "author": "bayunjiang",
  "license": "ISC"
}

其中 private 字段需要自己增加,这个字段可以防止代码被公开发布,其他字段含义请自行参考 package.json 定义。

我们新建一个 index.js 文件,在其中写一个示例函数,内容参考如下。

const sayHelloWorld = () => {
  console.log('Hello World')
}

保存并提交到远程分支之后我们基于当前代码打一个 1.0.0 标签。

安装依赖

运行如下代码在项目里引用上述公共库。

npm install -S git+ssh://git@git.example.com:bayunjiang/hello-world.git#1.0.0

项目地址请使用 SSH 地址,使用前需要先自行配置公钥。

安装完成之后我们可以在package.json 文件中看到如下内容。

"dependencies": {
	"@bayunjiang/hello-world": "git+ssh://git@git.example.com:bayunjiang/hello-world.git#1.0.0"
}

如何使用

import { sayHelloWorld } from '@bayunjiang/hello-world'

sayHelloWorld()