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

Question

我将非常具体，并将我的问题分为几点。

1。我想要实现的整体目标：

创建一个准备发布到npm angular 2样板文库（最新版本）

2。什么不起作用：

之前在stackoverflow上引用的两个教程在许多方面都不能正常工作，或者已经过时或者不太清楚。同样在互联网上，有关如何准备有效且有效的角度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。我想要具体实现的目标：

我想知道这些步骤，并在此总结一下必不可少的内容     从头开始创建最新的angular 2版本的库。用代码     例子。愿它为未来的所有stackoverflowers服务     工作样板。

我建议的是用代码示例写下需要用点完成的最短列表。

Answer 1

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

1。创建组件

您需要创建foo.component.ts文件及其html模板。您更喜欢内联css（在styles的{​​{1}}属性中）。

<强> !!!不要忘记在@Component中设置moduleId: module.id以使用相对路径将模板链接到您的组件!!!

2。编译代码（一旦测试，测试部分是隐式的）

您需要使用@Component和tsc编译您的组件，如下所示：

tsconfig

3。发布到npm

首先，创建.npmignore文件，这是一个例子：

{
  "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"
  ]
}

如果您没有使用JetBrains IDE，请删除.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 条目。

然后在.idea中设置您的发布配置：

package.json

一切准备就绪后，您可以"publishConfig": { "registry": "https://registry.npmjs.org/" } 。

实施例

可以在此处找到npm publish的外部库的一个很好的示例： https://github.com/noemi-salaun/ng2-logger/

或者在这里获取更新的内容，包括webpack兼容性： https://github.com/kaiu-lab/serializer

它不是一个组件，但整个发布配置，捆绑和测试逻辑都做得很好。