发布vue组件至华为云npm私有依赖库

发布vue组件至华为云npm私有依赖库

前言

由于团队内部未计划公开组件使用，转向npm获取私有组件方向。以下讲解为华为云发布获取npm私有组件的探索过程，实际项目中暂未能引入私有组件，主要原因是组件未同步至npm官方，只能通过上传项目至华为云平台，通过增加手动编译构建的方式下载依赖。针对该问题，我们将继续探索。

准备工作

• vue项目工程
  • 组件工程
  • 依赖工程
• 华为云账号
  • 前往注册/登录
  • 开通软件开发平台，有提供免费基础版
  • 新建代码托管仓，形同github，应用于vue项目工程托管
  • 新建私有依赖库，最终依赖源（添加路径为 package.json 中 “name”: “@aa/bb” 的"aa"）

执行过程

vue项目工程配置

配置 package.json 信息

1. 执行命令修改配置

> npm init

属性	说明
package name	你的项目名字叫啥
version	版本号
description	项目描述
entry point	指定项目node服务的js文件
test command	项目启动脚本文件，默认为node app.js
git repository	上传到git仓库地址
keywirds	关键字
author	作者
license	发行项目证书

2. 手动“补充”修改配置

“private”: false

./package.json 中修改 “private”: false，否则编译构建时将报错如下：

npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/build/.npm/_logs/***.log
[ERROR]  : script returned exit code 1, exitMessage is: command run failed
[INFO]  : [JobStatusPlugin] onCompleted: j_BHI44fwr #1
[INFO]  : [JobStatusPlugin] onCompleted end: j_BHI44fwr #1
Finished: FAILURE

关联私有依赖库构建配置

从创建的私有依赖库中，下载配置文件并放到项目根目录下。这里建议通过下载方式添加，命令执行大概率需要踩坑。具体操作可参照官方指导，下面引用官方图解：

未添加上诉配置文件，编译构建时将报错如下：

npm ERR! code E404
npm ERR! 404 Not Found - PUT https://registry.npmjs.org/@aa%2bb - Not found
npm ERR! 404
npm ERR! 404  '@aa/bb@0.1.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/build/.npm/_logs/2021-08-12T06_48_02_897Z-debug.log
[ERROR]  : script returned exit code 1, exitMessage is: command run failed
[INFO]  : [JobStatusPlugin] onCompleted: j_IECyc9Xb #1
[INFO]  : [JobStatusPlugin] onCompleted end: j_IECyc9Xb #1
Finished: FAILURE

发布私有组件

上传项目至代码托管仓

1. 云端配置SSH密钥
2. 上传项目至云端仓库，云端仓库地址获取途径如下官方图解：

配置并执行编译构建任务

1. 下载私有依赖库配置文件，完成前面的工作，此步可跳过
2. 配置代码仓库，同上可跳过
3. 配置并执行编译构建任务，记着按说明修改默认命令如下：

export PATH=$PATH:/root/.npm-global/bin
npm config set strict-ssl false
npm publish

执行构建任务成功后（此处撒花庆祝一分钟），在私有依赖库中，即可看到对应上传的私有组件。如下官方图解：

获取私有组件

上传“新项目”至代码托管仓

1. 下载私有依赖库配置文件，同构建私有组件项目一致
2. 配置代码仓库信息，于 package.json 中添加

"dependencies": {
	"@aa/bb": "^0.1.0"
}

3. 上传项目至云端仓库，云端仓库地址获取途径如下官方图解：

4. 配置并执行编译构建任务，记着按说明修改默认命令如下：

export PATH=$PATH:/root/.npm-global/bin
npm config set strict-ssl false
npm install --verbose

构建过程中执行下载无误即成功（此处亦撒花庆祝一分钟）。如下官方图解：