使用 Angular2 和 Webpackage 创建节点包答案

【问题标题】：Creating Node Package with Angular2 and Webpackage使用 Angular2 和 Webpackage 创建节点包
【发布时间】：2016-12-02 11:49:31
【问题描述】：

我正在构建一个包含多个项目的大型应用程序，因此我想将一些 Angular2 组件放在一个额外的模块中，以便在所有模块之间共享。

由于我在我的项目中使用 webpack，所以在 node 模块中使用优势会很好，但是生成的输出并不真正可用。

我尝试使用 webpack 的原因是利用 webpack 提供的加载器。我想在不同的文件中分离模板和样式。

有没有办法使用 webpack 来呈现我的 angular2 组件，以便我可以将它们用作不同项目中的 node_module？

【问题讨论】：

【解决方案1】：

默认情况下，Webpack 会为浏览器输出一个包。如果您希望您的代码在另一个项目中可用，您可以在 Webpack 配置中使用 output.library 和 output.libraryTarget。一个例子：

output: {
    library: 'MyComponentName', // Your component / library name
    libraryTarget: 'umd', // Or 'commonjs2', 'var', ...
}

这将导致您可以在浏览器或任何支持 AMD 或 CommonJS2 的模块系统（如 Webpack、Browserify、RequireJS...）中导入一个包。

in the Webpack documentation 提供有关这两个选项的更多信息。

奖金：

如果您没有设置output.library 选项，您的主包的所有导出属性都将被导出。这仅对不使用 AMD 或 CommonJS 的捆绑程序/浏览器有效。例如：

entrypoint.js：

module.exports = {
    firstExport: 1,
    secondExport: 2,
};

将output.library 设置为MyLibrary，这将在浏览器中发生：

var MyLibrary = { firstExport: 1, secondExport: 2 };

没有output.library，它看起来像这样：

var firstExport = 1;
var secondExport = 2;

【讨论】：