美文网首页
Angular,在angular cli 基础上发布组件到npm

Angular,在angular cli 基础上发布组件到npm

作者: CK110 | 来源:发表于2017-11-28 16:02 被阅读896次

    记录下 ng-zorro-tree,发布到npm库的过程。

    在components 中增加index.ts

    将所有的组件导出

    export {  xxxx } from 'xxxx.xxx'
    

    安装依赖

    npm install angular-library-builder --save-dev

    修改package.json

    {
      "name": "xxxx",     //  
      "version": "1.0.1",
      "license": "MIT",
      "scripts": {
        "build:library": "rm -rf lib-dist/ && nglb --rootDir src/components --outDir lib-dist",
        "npm:publish":"npm publish"
      },
      "main": "./lib-dist/index.js",        // 与build:library 中的outDir 对应
      "types": "./lib-dist/index.d.ts",    // 与build:library 中的outDir 对应
      "dependencies": {
          // 这边增加依赖库,
      },
      "peerDependencies": {
        "@angular/common": "^5.0.0",
        "@angular/core": "^5.0.0"
      },
    }
    

    build:library
    --rootDir : 需要编译发布的组件文件夹

    --outDir lib-dist : 编译的路径

    增加 .npmignore 文件

    # folders to ignore
    /src
    /node_modules
    /test
    /.nyc_output
    /coverage
    /e2e
    /.idea
    
    # ignore typescript files
    *.component.ts
    *.service.ts
    *.module.ts
    index.ts
    
    # ignore tsconfig.json and tslint other
    tsconfig.json
    tslint.json
    protractor.conf.js
    karma.conf.js
    .gitignore
    .editorconfig
    .angular-cli.json
    
    

    运行命令

    // 编译
    npm run build:library
    
    // 发布
    npm run npm:publish 
    

    相关文章

      网友评论

          本文标题:Angular,在angular cli 基础上发布组件到npm

          本文链接:https://www.haomeiwen.com/subject/hiqebxtx.html