详解如何构建一个Angular6的第三方npm包

不废话直接上教程

1.建立项目

ng new projectname

2.创建第三方库

项目创建完毕，依赖安装完毕后

# libraryname : 第三方包名字
# prefix : 组件前缀(如 nz-zorro 的组件前都是 nz-xxx)
cd projectname
ng g library libraryname --prefix prefix

3.查看项目目录

多出一个projects目录,目录里就是刚才generate的第三方library

可以看到实际和 ng new 出的项目无多大差别,第三包的依赖直接加入package.json中,然后依赖的Module按照常规方法加入到src/app.module.ts即可.

4.愉快的构建自己的模块

图中是模块的导出文件，应该会去自动去扫描的，如果引用时遇到问题直接从public_api.ts导出然后重新打包即可

5.构建第三方包

这一步需要注意的是，打包前修改package.json中的项目信息，起码version信息需要修改

#切到根目录
cd 项目根目录路径
ng build mylibrary

看一眼打出的包

6.发布包

#切到目录
cd dist/mylibrary
#发布
npm publish

这里npm publish相关的可以自行百度

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用typescript开发angular模块并发布npm包

    使用typescript开发angular模块并发布npm包

    本文介绍了使用typescript开发angular模块并发布npm包,分享给大家,具体如下: 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下,name默认为文件夹名称 { "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "mai

  • cnpm加速Angular项目创建的方法

    问题描述 使用官网推荐的命令行工具ng来初始化Angular项目. ng new my-app 前面都挺快的,创建本地文件嘛.就是到最后安装依赖的时候特别慢,等了半个小时,也没装完. cnpm加速 使用淘宝为广大程序员提供的cnpm进行加速,cnpm官网. npm install -g cnpm --registry=https://registry.npm.taobao.org 加速创建 慢的问题就出现在ng使用npm安装依赖,所以就需要使用ng创建项目骨架,但是跳过安装依赖的过程,我们手动去

  • 详解如何构建一个Angular6的第三方npm包

    不废话直接上教程 1.建立项目 ng new projectname 2.创建第三方库 项目创建完毕,依赖安装完毕后 # libraryname : 第三方包名字 # prefix : 组件前缀(如 nz-zorro 的组件前都是 nz-xxx) cd projectname ng g library libraryname --prefix prefix 3.查看项目目录 多出一个projects目录,目录里就是刚才generate的第三方library 可以看到实际和 ng new 出的项目

  • 详解Gradle构建过程

    详解Gradle构建过程

    Gradle构建过程 根据在上图中所示,Gradle 的构建过程主要分为三个阶段: 初始化阶段 配置阶段 执行阶段 监听Gradle初始化时机 在这个初始化阶段中主要有两个时机需要关注: setting.gradle 执行结束的监听 //1.setting.gradle 执行结束的监听 gradle.settingsEvaluated { println "settings.gradle 初始化执行结束" } 参与构建的Project对象创建完毕的监听 //2.参与构建的Project

  • 详解Python3 定义一个跨越多行的字符串的多种方法

     方法一:使用三引号 >>> str1 = '''Le vent se lève, il faut tenter de vivre. 起风了,唯有努力生存. (纵有疾风起,人生不言弃.)''' >>> str1 'Le vent se lève, il faut tenter de vivre. \n起风了,唯有努力生存.\n(纵有疾风起,人生不言弃.)' >>> print(str1) Le vent se lève, il faut tenter

  • 详解Android封装一个全局的BaseActivity

    1.前言 对于一个Android开发者来说,每一个页面都继承一个单独的系统Activity,有时候会带来很多不必要的困扰.比如:每一个页面会有重复的代码,阅读起来麻烦:每一次写新的页面功能总要打开原来的页面代码拷贝一部分过来:有时候代码调试排查问题也不方便等等. 如果你的项目里面没有将Activity都继承自一个自己封装的BaseActivity.或者针对自己封装的BaseActivity觉得还不够完善的,这篇博客可能会对你有帮助! 2.特点 封装:将所有Activity都用到的一部分代码封装到

  • 详解如何创建一个.NET Core工程

    详解如何创建一个.NET Core工程

    1.打开VS2019,点击“创建新项目”,选择“ASP.NET Core Web应用”,设置路径和文件名,选择目标框架(.net core3.1长期支持),配置HTTPS(选勾),点击“创建”,自此就创建了一个.net core工程. 2.工程目录和文件介绍 Properties—>launchSettings.json :项目配置文件 appsettings.json:应用配置文件,类似web.config wwwroot:内容目录,存放静态文件 Program.cs:控制台应用 Startu

  • 详解如何实现一个Kotlin函数类型

    详解如何实现一个Kotlin函数类型

    目录 接口与函数类型 总结 接口与函数类型 业务开发中,经常会有实现一个函数式接口(即接口只有一个方法需要实现)的场景,大家应该都会不假思索的写出如下代码: interface Callback { fun response(): String } class Achieve: Callback { override fun response(): String { return "" } } 这么写当然没什么毛病,甚至为了让kotlin支持对接口Callback的SAM转换,你还可以

  • 详解如何将springboot项目导出成war包

    以demo-3项目为例: 1.将pom.xml中的jar改成war     2.添加依赖 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <scope>provided</scope> </dependency> 3.移除插件 如果已经嵌入了tomcat插件,还要移除tomcat插件

  • Node.js如何优雅的封装一个实用函数的npm包的方法

    Node.js如何优雅的封装一个实用函数的npm包的方法

    为什么要封装一个实用函数的 npm 包? 当你连续写了多个 Node 应用, 都想要 console 漂亮一点, 你可能会像下面这样封装一个函数 import chalk from "chalk"; function noop(msg: string): string { return msg } function log(fn: Function): (msg: string) => void { return (msg: string): void => { conso

  • 详解java构建者模式Builder

    定义 Builder模式是一步步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细的控制对象的构建过程.该模式是将构建复杂对象的过程和它的部件解耦,使得构建过程和部件的表示隔离. 作为复杂对象可能有很多组成部分,比如汽车有车轮.方向盘.发动机.变速箱还有各种小零件等,如何将这些部件组装成一台汽车,这个装配的过程漫长且复杂,对于这种情况,为了对外部隐藏实现细节,就可以使用Builder模式将部件和组装过程分离,使得构建过程和部件分离可自由扩展,两者之间的耦合也降到最低

  • 详解如何构建Angular项目目录结构

    详解如何构建Angular项目目录结构

    在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用. 首先看一下整体的目录结构: 可以看到,命令行工具自动生成了很多文件和目录,我们来说说这些目录是干什么的 首层目录: node_modules 第三方依赖包存放目录 e2e 端到端的测试目录 用来做自动测试的 src 应用源代码目录 .angular-cli.json Angular命令行工具的配置

随机推荐