如何打包和发布 Angular2 插件？答案

【问题标题】：How do I package & release Angular2 plugins?如何打包和发布 Angular2 插件？
【发布时间】：2016-07-27 08:32:48
【问题描述】：

在我的应用程序中，我创建了几个我认为对其他人非常有用的属性和结构指令。但是，在搜索 Angular2 文档、谷歌和堆栈溢出后，我找不到任何关于如何打包和发布单个插件的指南。

如何将指令捆绑到可以安装并导入其他项目的包中？

【问题讨论】：

【解决方案1】：

您可以使用 tsc 编译器打包您的库。这个级别要理解的关键是，使用下面的配置，不能直接concat编译好的JS文件得到单个的JS文件。

在 TypeScript 编译器配置中：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

在 HTML 中

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

事实上，这些 JS 文件将包含匿名模块。匿名模块是一个使用 System.register 但没有模块名称作为第一个参数的 JS 文件。这是在将 systemjs 配置为模块管理器时 typescript 编译器默认生成的内容。

因此，要将所有模块放入一个 JS 文件中，您需要在 TypeScript 编译器配置中利用 outFile 属性。

这个问题可以给你一些额外的提示：

How do I actually deploy an Angular 2 + Typescript + systemjs app?

您还可以使用 webpack 来打包库（和应用程序）。你可以看看 ng2-select 做了什么。查看这个配置文件：

https://github.com/valor-software/ng2-select/blob/master/webpack.config.js

【讨论】：