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

2017-11-28  本文已影响896人  CK110

记录下 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 
上一篇 下一篇

猜你喜欢

热点阅读