Angular 开发第三方组件+打包+npm发布（个人记录）

本文链接：https://blog.csdn.net/qq_40020447/article/details/120542356

写在前面

本文内容仅为个人记录，不一定适用所有读者；
本人技术水平有限，很多知识并不懂，所以内容对有的大佬来说很肤浅；
准备工作用到了docker，因为我自己本地电脑跑 build 会报错，实在解决不了；
勿喷，谢谢；

最终成果展示

一. 环境及工具

win10
Angular 7.1.0
docker
docker 镜像：kodear/angular7
vsCode

正文开始

1. 准备docker环境

Tips: 如果你本地能跑起angular项目，并build不会报错的话，可以不需要这一步；

1.1 拉取镜像

docker pull kodear/angular7

1.2 构建容器

docker run -it --name [容器名称] -p [本地端口]:[容器内端口] -v /[本地路径]:[容器内路径] kodear/angular7

1.3 进入容器

docker exec -it [容器名] -bash

2. 基本项目框架准备

Tips：由于本人公司都是angular7 所以ng new [项目名]后，我会手动修改package.json文件；
这个不是本文重点，重点是能过一遍流程；

{
  "name": "woui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "crypto-js": "^3.3.0",
    "ng-zorro-antd": "^7.5.1",
    "ngx-echarts": "^4.2.1",
    "path": "^0.12.7",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/build-ng-packagr": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^4.2.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslib": "^1.9.0",
    "tslint": "~5.11.0",
    "typescript": "3.1.6"
  }
}

2.1 创建项目并安装依赖

ng new woui
一系列询问后，会自动安装依赖；

2.2 创建你想发布的第三方包（这里开始之后，都是重点了）

ng g library wo --prefix=wo

wo是我的第三方组件名，等同于ng-zorro-ant 这种
解释一下:为什么nmp官网里叫woui?
答案：因为npm里wo有同名，不得不改成woui；
–prefix 表明所有创建的组件都以 wo开头，等同于 nz-xxx

2.3 组件开发

假设你现在的位置处于项目根目录下

cd project/wo/src/lib #进入该目录
ng g c scroll-table  #创建一个组件

Tips:由于我的项目用的是less
修改angular.json中寄生项目部分，以此指定style为less；
在这里插入图片描述

穿插一个重点

/project/wo/src/lib/wo.module.ts中，每次新建的组件，都要在exports中声明一次；
在这里插入图片描述

2.4 组件测试

我们知道，我们创建的wo这个libray，是基于 woui这个项目来的，所以woui我们就称它为宿主项目，wo为寄生项目；

在宿主项目的 app.mudule.ts 中引入 woModule
宿主项目中使用组件

然后运行你的项目，如果能在页面中看到 scroll-table works 字样说明没问题了；

至此：第三方组件开发工作已完成，现在准备第三方组件发布工作

3. 发布准备工作；

3.1 安装 ng-packagr

npm install ng-packagr --save-dev

Tips：如果安装失败，尝试使用
npm install ng-packagr --save-dev

3.2 安装 tsickle@0.38.1

npm install tsickle@0.38.1

3.3 npm 账号准备

如果没有，就去注册，注册教程略；
假设你已经有npm账号了，那么就开个终端
npm adduser
输入你的账号，密码，邮箱，这样以后npm publish就不用每次输密码了；

4. 打包及发布；

4.1 打包wo寄生项目；

ng build wo
在/dist 下会生成一个打包文件，这种
在这里插入图片描述
进入到 /dist/wo/目录下
npm publish

如果名称重复相关的报错就，修改该目录下的package.json 中的name；
同样记住，每次新版本发布的时候，手动修改package.json文件中的版本；
如果你开发的组件有依赖其他第三方依赖，一定要在dependencies中配置，不然实际项目用这个组件时，会发生找不到相关报错；

5. npm官网查看；

进官网，个人中心里，profile下可看到；
在这里插入图片描述

6. 实际项目引用；

嗯，激动人心的时刻来了，用惯了npm i xxx，却从来没有一个轮子属于自己的，
npm i woui我自己的轮子，跑的快不快就靠它了；
实际项目中的引入，这是在项目的node_modules目录下
在这里插入图片描述
实际演示：

至此：全部搞定，祝大家也能顺利搞定；不一定适用于每个人，根据自己的实际情况，参考多篇文档，总结一套自己的解决方案；

总结

静态文件不能被打包的
如果开发第三方service 可以考虑都写在woService里面，通过它一次性暴漏出去；
有的组件可能需要相关的css文件，需要在实际项目的style.less 中单独import一下；
很多时候包与包之间存在依赖，经常出现cant fin module等要么是没装成功，要么丢失；
本地环境不纯净，考虑使用docker构建一个纯净的环境；

附加内容

附带一个history 记录，为了以后忘了操作流程，方便回忆在这里插入图片描述