如何创建一个准备发布到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属性中@Component).

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

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

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