如何创build一个准备发布到npm angular 2库

我会非常具体,将我的问题分成几点。

1.我想要达到的总体:

创build一个准备发布到npm angular 2样板库(最新版本)

2.什么不工作:

前面提到的两个教程都是在很多方面无法正常工作,或者已经过时或者不太清楚。 同样在互联网上,比如何准备一个有效的和有效的angular度2库的信息更混乱。

http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/

https://medium.com/@OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435#.c3yuzcrgj

3.我想具体实现的是:

我想知道这些步骤,并在这里总结一下从头开始创build最新的angular 2版本库所必需的。 用代码示例。 愿它可以作为一个工作样板服务于未来的所有stackoverflowers。

我提议的是用代码示例写下尽可能最短的列表,并列出需要做的工作。

如果我理解你的问题,你想创build一个组件并将其作为一个库发布。

1.创build组件

您需要创build您的foo.component.ts文件及其html模板。 你会喜欢内嵌的CSS( @Component styles属性)。

不要忘记在@Component设置moduleId: module.id ,使用相对path将模板链接到组件。

2.编译代码(一旦你testing了,testing部分是隐含的)

你需要使用tsctsconfig编译你的组件,应该看起来像这样:

 { "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "target": "es5", "sourceMap": true, "inlineSources": false, "declaration": false, "experimentalDecorators": true, "emitDecoratorMetadata": true, "stripInternal": true, "skipLibCheck": true }, "files": [ "index.ts", "typings/index.d.ts" ] } 

3.发布到npm

首先,创build你的.npmignore文件,这里是一个例子:

 .idea *.ts !*.d.ts /typings.json /typings/ /node_modules/ /.gitignore /.npmignore /.travis.yml /test /karma.conf.js /karma-test-shim.js /rollup.config.js /rollup-min.config.js /systemjs.config.js /tsconfig.json /tsconfig-build.json 

如果您不使用JetBrains IDE,请删除.idea条目。

然后在package.json设置你的发布configuration:

 "publishConfig": { "registry": "https://registry.npmjs.org/" } 

一切准备就绪后,您可以npm publish

angular2的外部库的一个很好的例子可以在这里find: https : //github.com/noemi-salaun/ng2-logger/

或者在这里更新一个,包括webpack兼容性: https : //github.com/kaiu-lab/serializer

这不是一个组件,但是整个发布configuration,捆绑和testing逻辑都做得很好。