WithCoderWithCoderWithCoder

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

项目结构

1-20022410551M52.png

准备工作

    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 命令,安装使用自己的项目。

总结:

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

欢迎分享交流,转载请注明出处:WithCoder » ng-packagr打包+npm publish流程