Angular8 模块打包发布到npm

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：295

### 发布准备

- 安装`ng-packagr`到开发包中

```
npm i ng-packagr --save-dev
```

- 在根目录**不是app，而是工程名开始的根目录**下创建`ng-package.json`文件，如下

```
{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "src/app/modules/public_api.ts",
    "umdModuleIds": {
      "@ckeditor/ckeditor5-angular": "^1.1.2",
      "@ckeditor/ckeditor5-build-classic": "^16.0.0",
      "@nebular/eva-icons": "4.6.0",
      "@nebular/theme": "4.6.0",
      "lodash": "^4.17.15",
      "ng2-file-upload": "^1.4.0",
      "xlsx": "^0.15.5"
    }
  }
}
```

- `entryFile`为打包时需要导出的模块和相关声明
   - `umdModuleIds`为模块依赖的其他包

- 创建`public_api.ts`文件，此文件为`ng-package.schema.json`中配置的`entryFile`

```
export * from './dynamic-form';
export * from './dynamic-form/dynamic-form.module';
export * from './dynamic-form/providers/data';
```

- 修改`package.json`文件

1. 在`package.json`文件中写入`packagr`脚本

2. 将`private`值改为**false**

3. 删除`dependences`字段的内容，打包时不需要依赖，否则打包会报错，但是开发时是需要的，因此正确的说法应该是剪切

4. 依赖包加入到`peerDependencies`，并不推荐直接将`dependences`更改为`peerDependencies`，因为`dependences`中的很多包其实不是发布模块的依赖，而是整个项目的依赖，因此不应该打包

5. 较完整的一个`package.json`如下：

```
   {
     "name": "seven-food-form",
     "version": "0.2.7",
     "description": "The dynamic form of angular based on nebular",
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
         "build": "ng build",
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e",
         "packagr": "ng-packagr -p ng-package.json"
     },
     "private": false,
     "peerDependencies": {
         "@ckeditor/ckeditor5-angular": "^1.1.2",
         "@ckeditor/ckeditor5-build-classic": "^16.0.0",
         "@nebular/eva-icons": "4.6.0",
         "@nebular/theme": "4.6.0",
         "bootstrap": "^4.3.1",
         "lodash": "^4.17.15",
         "ng2-file-upload": "^1.4.0",
         "xlsx": "^0.15.5"
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "~0.803.20",
         "@angular/cli": "~8.3.20",
         "@angular/compiler-cli": "~8.2.14",
         "@angular/language-service": "~8.2.14",
         "@types/jasmine": "~3.3.8",
         "@types/jasminewd2": "~2.0.3",
         "@types/node": "~8.9.4",
         "codelyzer": "^5.0.0",
         "jasmine-core": "~3.4.0",
         "jasmine-spec-reporter": "~4.2.1",
         "karma": "~4.1.0",
         "karma-chrome-launcher": "~2.2.0",
         "karma-coverage-istanbul-reporter": "~2.0.1",
         "karma-jasmine": "~2.0.1",
         "karma-jasmine-html-reporter": "^1.4.0",
         "ng-packagr": "^9.0.2",
         "protractor": "~5.4.0",
         "ts-node": "~7.0.0",
         "tslint": "~5.15.0"
    },
    "repository": {
         "type": "git",
         "url": "https://github.com/jinxiu3939/seven-food-form.git"
      },
      "keywords": [
         "dynamic form",
         "angular",
         "typescript",
         "nebular",
         "seven food"
      ],
      "author": "hans &lt;xiujixin@163.com&gt; (https://www.xindejob.com)",
      "license": "MIT",
      "homepage": "https://github.com/jinxiu3939/seven-food-form"
   }
   ```

- 项目根目录下执行打包脚本

```
npm run packagr
```

- 切换到`dist`文件夹执行打包压缩

```
npm pack
```

- 执行发布命令

```
npm publish
```

### 其他

- 首次打包需要执行登录操作

根目录下执行

```
npm login
```

按照提示输入用户名密码和邮箱，这里密码输入的时候是看不见的

登录成功后会有提示

标签： angular8 npm ng-packagr

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：svn 仓库创建和配置

Angular8 模块打包发布到npm

随便看看

留言