首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何创建并发布你的angular组件库

如何创建并发布你的angular组件库

作者头像
lilugirl
发布2019-08-13 10:44:00
1.8K0
发布2019-08-13 10:44:00
举报
文章被收录于专栏:前端导学前端导学

本例创建一个天气组件

ng new weatherwidget --createApplication=false

选择不要路由

选择scss

cd weatherwidget

用vs code打开本项目

创建组件库weather

ng generate library weather

现在我们需要创建一个项目来测试这个库

ng generate application weathertest

在angular.json文件中可以看到三个项目

然后你可以随心所以的对weather项目做修改以达到你希望的组件效果,因为是教你如何发布组件的课程,在这里我们就演示如何具体修改你的组件本身了。

在项目根目录下的package.json文件上上增加一条命令

执行命令

npm run weatherbuild

在dist目录生成了编译好的文件

现在在weathertest项目中对weather组件进行试用

因为在tsconfig.json中有设置weather的路径 这里的是可以直接引用WeahterModule的

把app.component.html的内容改为

<lib-weather></lib-weather>

现在测试一下效果

ng serve weatherteset

有三种方式可以将组件库导入到你的项目中使用

第一种作为tar file添加都项目目录中

cd dist/weather/
npm pack

tar文件被生成了

回到你的项目目录下安装tar包

npm install ./dist/weather/weatherweather-0.0.1.tgz

安装完毕后可以看到package.json中生成了相关的信息

去除tsconfig.json中关于weather的配置内容之后 我们看看项目是否能运行正常,如果可以说明调用成功

第二种方式是发布npm包

首先修改weather项目中的package.json文件中的配置 这些配置会体现在将来发布的npm包中

重新更新项目根目录下package.json文件中的配置

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

npm install -g verdaccio
verdaccio

打开http://localhost:4873/ 可以看到

我们先尝试把组件发布到私有的npm库中 这样设置即可

执行发布命令前 我们先注册一下用户

npm adduser --registry http://localhost:4873

按要求设置一下用户名和密码 邮箱等

然后再执行发布命令

npm run weatherbuild

发布成功! yeah!

刷新私有库地址发现了新发布的库

现在尝试在项目中安装weather库

npm install @liuyi/weather  --registry http://localhost:487
3 --save

手动移除package.json文件中 之前tar file方式引入的设置

再次测试项目是否能正常运行

第三种方式就是把库发布到公共的npm库中,发布步骤和第二种方式相似 可参考 https://my.oschina.net/lilugirl2005/blog/2999467

如果你发布到公共npm上出现了问题可以参考 https://github.com/XXHolic/segment/issues/28

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档