素材巴巴 > 程序开发 >

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. 保存代码后启动项目,就可以看到浏览器上显示打包好的组件内容了

 


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。