angualr创建npm并打包
程序开发
2023-09-05 21:18:56
在使用angular开发项目的时候,有些东西为了方便调用和单独管理,需要把部分组件通过npm封装进行调用,那如何使用创建组件并打包为npm可以调用的呢?步骤如下:
一、创建厂库
1. 打开终端命令面板,输入命令创建一个项目为createLib
ng new createLib
2. 使用前端开发工具打开新建的 createLib 项目
3. 开发厂库
使用以下命令创建厂库,厂库在项目根目录下名字为projects的文件夹,在projects下有刚刚自己新建的仓库
ng g library header-test --prefix=ng
4. 在projects/src/lib文件夹下方会发现有一个header-test.component.ts文件,打开该文件修改组件的内容
5. 找到根目录下的angular.json配置文件中刚刚建的仓库,添加如下代码
"configurations": {"production":{"project":"projects/header-test/ng-package.json"}}
6. 报错代码后在控制台输入如下代码进行打包
ng build --prod header-test
7. 打包成功后可以看到项目跟目录会存在一个dist文件夹
二、测试厂库
1. 在package.json文件中引入刚刚打包好的组件
打开跟目录下的package.json文件,在dependencies对象中添加如下代码
"header-test":"file:dist/header-test"
2. 在app.modules.ts文件中引入HeaderTestComponent组件
3. 在app.component.html文件中直接使用header-test组件
4. 保存代码后启动项目,就可以看到浏览器上显示打包好的组件内容了
标签:
上一篇:
后端开源的Low-Code api 接口生成汇总
下一篇:
相关文章
-
无相关信息