angular自定义组件并发布本地私有服务

一、安装Angular

注意独立安装的angular不影响其他node项目下的angular

//经过测试angular6和8打包比较小
npm install -g @angular/cli@10

二、创建组件

ng new weatherwidget --createApplication=false
cd weatherwidget
//创建组件库weather
ng generate library weather
//创建一个项目来测试这个库
ng generate application weatherTest
//package.json加入脚本scripts
"build-weather": "ng build weather"
//运行
npm run build-weather

二、调试测试

//进入weatherTest加入module
//app.module.ts  imports 加入WeateherModule
//app.component.html的加入或改为：//测试一下效果
ng serve weatherTeset

三、安装本地服务

如果你想把组件发布到私有的npm仓库中 可以选择使用verdaccio https://github.com/verdaccio/verdaccio 

//注意版本3.xxx
npm install -g verdaccio   
verdaccio
//打开http://localhost:4873/ 可以看到
//修改IP让局域网可见
//C:\Users\xxx\AppData\Roaming\verdaccio/config.yaml
//加入
listen: 0.0.0.0:4873

//执行添加用户
npm adduser --registry http://xxx:4873

//再次修改package.json中的scripts
"build-weather": "ng build weather && cd dist/weather && npm publish --registry http://xxxx:4873"
//执行发布
npm run build-weather
//可以访问http://xxx:4873查看了

//项目中安装

npm install @liuyi/weather --save --registry http://xxx:4873

四、快捷发布

如何在npm上发布项目可以使用以下命令直接发布

npm login 

npm publish

如果要发布到本地部署的环境，请使用本地局域网IP加端口发布

npm publish --registry http://192.168.0.160:4873

以下集成了一些打包命令

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "pack": "cd dist/nex-editor && npm pack",
    "assets": "cp -rf projects/nex-editor/src/assets dist/nex-editor/assets",
    "prod": "ng build nex-editor && npm run assets && npm run pack",
    "publish": "ng build nex-editor && npm run assets && cd dist/nex-editor && npm publish --registry http://192.168.0.160:4873"
  },

执行npm publish 后即可编译并发布到本地