ng-packagr打包+npm publish流程

因项目需要，了解使用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 命令，安装使用自己的项目。

总结：

使用过程中，遇到的问题，在官方文档中都有涉及，使用新的产品前，一定要仔细阅读官方文档说明。

转载自:http://www.withcoder.com/articles/web/pack/73.html