因项目需要,了解使用ng-packagr打包。并通过网络搜索,初步探索使用npm publish发布项目。本文只是个人学习记录,也希望对了解相关知识的同学有所帮助。
开发环境
vscode + typescript,包管理使用yarn(npm)。
相关链接
ng-packagr的npm地址:https://www.npmjs.com/package/ng-packagr
git地址:https://github.com/ng-packagr/ng-packagr
准备工作
ng-packagr依赖angular,使用前需要安装相关依赖(@angular/core,@angular/cli,@angular/compiler,@angular/compiler-cli),这个不再多说。
打包
第一步:
安装ng-packagr,如果用yarn,使用yarn add ng-packagr --dev;如果用npm,使用npm install ng-packagr –save-dev。
第二步:
添加打包配置属性,这一步可以通过两种方式进行配置(请注意whitelistedNonPeerDependencies属性,在后文会有解释)
第一种方式直接在package.json中进行配置,配置内容如下:
package.json
{
"name": "myDemo",
"version": "0.0.1",
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"ngPackage": {
"lib": {
"entryFile": "public_api.ts"
},
"whitelistedNonPeerDependencies": [
"."
]
}
}
第二种方式在项目根目录下面创建ng-package.json文件,配置内容如下:
ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
},
"whitelistedNonPeerDependencies": [
"."
]
}
第三步:
编写打包入口文件public_api.ts,所有希望在外部引用的对象,都需要在此文件中明确输出。(注意:public-api.ts文件为相对package.json的文件路径,文中配置的位置为package.json的同级目录,也可以在其他目录,但需要指定完整的路径,如:"src/public-api.ts")
public-api.ts
export { Core } from "./ts/Core";
export { Utils } from "./ts/Utils";
export { main } from "./ts/main";
第四步:
开始执行打包,如果在第二步的打包配置中采用了package.json方式,则可以使用以下命令脚本:
{
"scripts": {
"ngpack": "ng-packagr -p package.json"
}
}
如果打包配置采用了 ng-package.json方式,则可以使用以下命令脚本:
{
"scripts": {
"ngpack": "ng-packagr"
}
}
然后,执行打包命令:
yarn ngpack
打包完成,会在根目录生成dist目录,这个就是要发布的目录。
打包遇到的问题:
1.Dependency "****" must be explicitly whitelisted.
如果package.json中dependencies有类库,在打包时会出现以上错误。这个问题在官网有解释,不支持打包是package.json中有dependencies。解决方法是删掉dependencies再打包,或者使用第二步中提到的whitelistedNonPeerDependencies配置。(请参考文档https://github.com/ng-packagr/ng-packagr/blob/9461c1d40ec7b47d5421b1d10d50131dd60d44ab/docs/dependencies.md)
发布
第一步:
创建npm账号,注册地址https://www.npmjs.com/。(如果已有,跳过此步)
第二步:
登录npm。先在命令行输入
npm whoami
查看当前登录用户。如果提示没有登录,在命令行输入
npm login
按提示输入正确的
Username: ***
Password:
Email: (this IS public) ***@***.com
Logged in as *** on https://registry.npmjs.org/.
登录成功。
第三步:
确认仓库地址,国内大部分都使用阿里淘宝镜像,如果没改publish会失败。
yarn config set registry https://registry.npmjs.org/
第四步:
在命令行输入
npm publish
输出以下信息说明发布成功
+ myDemo@0.0.1
发布遇到的问题:
1.Error: EPERM: operation not permitted
没有登录,请参照发布第二步登录。
2.npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published versions: 0.0.1. : myDemo
版本冲突,npm仓库中已有0.0.1的版本,发布新版本之前,记得修改package.json中的版本号。
3.npm ERR! you do not have permission to publish “myDemo”. Are you logged in as the correct user
包名被占用,修改包名
使用
发布成功后,可以登录https://www.npmjs.com/查看自己发布的项目。
可以使用npm i 或者yarn add 命令,安装使用自己的项目。
总结:
使用过程中,遇到的问题,在官方文档中都有涉及,使用新的产品前,一定要仔细阅读官方文档说明。