将Angular6本身定义的模块发布成npm包

建立本身的模块组件

1. ng new 一个工程node

2. ng g m 建立模块 例如我这里的modules文件下建立header模块npm

3. ng g c modules/head 建立一个hear组件,内容随意json

4. 将modules模块exports出去,让其余模块能够使用api

5. 作个测试在app模块中引入modules模块,并使用header组件app

发布前的准备测试

1.   安装ng-packagr 并在devDependency中声明ui

npm install ng-packagr --save-devspa

2. 在工程跟目录 (不是app,就是工程名开始的算跟目录)下建立ng-package.json code

3. ng-package.json blog

{
  "$ schema": "./node_modules/ng-packagr/ng-package.chema.json",
  "lib":{
     "entryFile": "public_api.ts"
  }
}

4. 建立 public_api.ts文件

5. public.api.ts 导入headermodule

export * from './src/app/modules/header/header.module';

6. 在package.json文件中写入脚本,并将private值改成false

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"  // 插入
},
"private": false // 修改

7. 删除package.json文件中dependences字段的内容

8. 执行上面建立的脚本

npm run packagr

执行以后你会发现,在你的工程的目录下生成了一个叫作dist的输入文件

9. 进入dist文件夹执行npm pack

10. 到npm官网中注册帐号

11. 在工程目录下执行npm login命令设置帐号密码和邮箱

12. 进入dist目录执行npm publish 命令 

至此,一个npm包就能支持经过npm install下来了,能够查看本身的npm帐户,上回显示本身的npm包有几个,这里要注意一下生成的dist文件夹里的package.json文件管理了自定义包的名称之类的信息,包名不要重复

13. 最后一部就是测试~

相关文章
相关标签/搜索