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

Question

我会非常具体，并将我的问题分成几个点。

1.我想总体实现的目标：

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

2。什么不起作用：

前面在 stackoverflow 中引用的以下两个教程在许多方面都无法正常工作，或者已经过时或不太清楚。此外，在互联网上，关于如何准备有效且可工作的 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.我想具体实现的目标：

我想知道步骤并在此总结什么是必不可少的 从头开始在最新的 angular 2 版本中创建库。带代码 例子。愿它为未来的所有 stackoverflowers 服务 工作样板。

我的建议是写下一份尽可能短的清单，并附上代码示例。

Answer 1

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

1。创建组件

您需要创建 foo.component.ts 文件及其 html 模板。你会更喜欢内联 CSS（在 @Component 的 styles 属性中）。

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

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

您需要使用tsc 和tsconfig 编译您的组件，应该如下所示：

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

首先，创建你的 .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中设置您的发布配置：

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

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

示例

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

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

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