• 将Angular6自己定义的模块发布成npm包


    创建自己的模块组件

    1. ng new 一个工程

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

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

    4. 将modules模块exports出去,让其他模块可以使用

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

    发布前的准备

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

    npm install ng-packagr --save-dev

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

    3. ng-package.json 

    {
      "$ 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. 最后一部就是测试~

  • 相关阅读:
    20155339 Exp9 Web安全基础
    20155339 Exp8 Web基础
    20155339 Exp7 网络欺诈防范
    20155339 Exp6 信息搜集与漏洞扫描
    20155339 Exp5 MSF基础应用
    20155339 Exp4 恶意代码分析
    20155339 Exp3 免杀原理与实践
    20155339平措卓玛 Exp2 后门原理与实践
    20155339平措卓玛 Exp1 PC平台逆向破解(5)M
    20155339 第16周课堂实践加分作业
  • 原文地址:https://www.cnblogs.com/timetimetime/p/9284746.html
Copyright © 2020-2023  润新知