如何创建一个准备发布到npm angular 2库 [英] How to create a ready to publish to npm angular 2 library

问题描述

我会很具体，将我的问题分为几个要点.

I will be very specific and will divide my question into points.

1.我总体上想要实现的目标:

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

Creating a ready to be published to npm angular 2 boilerplate library (latest version)

2.什么不起作用:

下面在stackoverflow上引用的以下两个教程在许多方面均无法正常工作，或者已过时或不清楚.同样，在Internet上，除了如何准备有效且有效的angular 2库的信息以外，还有更多的困惑.

Both tutorials beneath, cited at stackoverflow earlier are not working properly in many aspects or are outdated or just not very clear. Also in the Internet there is more confusion than information about how to prepare a valid and working angular 2 library.

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

3.我想具体实现的目标:

我想知道步骤，并在此总结对 从头开始以最新的angular 2版本创建库.带代码 例子.愿它为将来的所有stackoverflowers服务 工作样板.

I would like to know the steps and summarize here what is essential for creating the library in the latest angular 2 version from scratch. With code examples. May it serve all stackoverflowers for the future as a working boilerplate.

我建议编写一个尽可能简短的列表，以点说明的方式，并附上代码示例.

What I propose is to write down a shortest possible list what needs to be done in points, with code examples.

推荐答案

如果我很好地理解了您的问题，则希望创建一个组件并将其发布为库.

If I understand your question well, you want to create a component and publish it as a library.

您需要创建您的foo.component.ts文件及其html模板.您将更喜欢内联css(在@Component的styles属性中).

You need to create your foo.component.ts file and its html template. You'll prefer inline css (in styles attribute of @Component).

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

!!! Don't forget to set moduleId: module.id in @Component to link the template to your component using a relative path !!!

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

You need to compile your component using tsc and a tsconfig which should look like this:

{
  "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文件，这是一个示例:

3. Publish to npm

First of all, create your .npmignore file, here is an example:

.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条目.

If you're not using a JetBrains IDE, remove .idea entry.

然后在package.json中设置发布配置:

then set your publish configuration in package.json:

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

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

Once everything is ready, you can npm publish.

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

A good example of an external library for angular2 can be found here: https://github.com/noemi-salaun/ng2-logger/

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

Or here for a more up-to-date one, including webpack compatibility: https://github.com/kaiu-lab/serializer

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

It's not a component, but the whole publish config, bundling and testing logic is well done.

这篇关于如何创建一个准备发布到npm angular 2库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！