使用Angular2和Webpackage创建节点包

Question

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

由于我在我的项目中使用webpack，所以在节点模块中使用adavantages会很好，但生成的输出实际上并不可用。

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

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

Answer 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;