前端組件用 Scope 發布 npm 包的方法

1、引言

多人、多組織或多組件發布 npm 包到同一個倉庫時，可能出現命名沖突問題。

為了解決這個問題，npm 引入了“scope”（范圍）概念。

在 Angular 項目中，我們通常可以看到“@angular/core”、“@angular/common”等以“@”符號開頭、“/”間隔形式的依賴包，其中“@”和“/”之間的部分就是“scope”，類似編程環境中的“命名空間”。

包含“scope”的包安裝到本地后，“scope”以文件夾的形式表現，如下圖所示：

 

2、安裝

安裝一個包含“scope”包命令如下：

npm install @angular/core

 

安裝的時候還可以指定版本號：

npm install @angular/core@6.1.0

 

相應地，不包含“scope”的包安裝命令如下：

npm install moment

 

同樣也可以指定版本號：

npm install moment@1.2.3

 

3、發布

怎樣才能以“scope”的形式將 組件或包發布到 npmjs 或 nexus 呢？

只需配置 npm 參數和項目 package.json 即可：

• 配置 npm 參數

npm config set @my-scope:registry "http://192.168.x.y:z/my-repository/"

 

其中，“my-scope”即與“http://192.168.x.y:z/my-repository/”相應的“scope”。

 

• 配置項目 package.json

{
  "name": "@my-scope/my-component",
  //...
}

 

 

其中“my-scope”是所屬的“scope”。

 

配置好之后再運行發布命令：

npm publish --registry http://192.168.x.y:z/my-repository/

 

如果發布時不想指定 registry，可以先配置 npm registry：

npm config set registry http://192.168.x.y:z/my-repository/

 

或者在項目 package.json 中指定：

{
  "name": "component-project",
  "publishConfig": {
    "registry": "http://192.168.x.y:z/my-repository/"
  }
  //...
}