如何将 npm 包与 webpack 捆绑在一起并作为对象公开？

Question

我不确定这是否可行，但我想做的是获取一些 NPM 包，使用 Webpack 将它们捆绑在一起并将它们公开为一个对象，其中每个包都是一个属性.

例如，如果我想捆绑 react 和 react-dom，它会提供一个对象，如：

{
    'react': /* react code */,
    'react-dom': /* react-dom code */
}

我目前的配置是：

module.exports = {
  entry: [ 'react', 'react-dom' ],
  output: {
    path: __dirname + '/public',
    publicPath: 'http://localhost:8081/public/',
    filename: 'bundle.js',
    libraryTarget: 'umd',
  }
};

这似乎有点工作，因为它确实 return 一个对象，但它 returns 的对象是最后一个 entry 包是什么，所以在这种情况下, 该对象包含 react-dom 的所有方法。

如果我将 entry 数组的顺序更改为 [ 'react-dom', 'react' ]，那么只会公开 react 方法。

我的想法是导出对象，这样我就可以使用它们的属性访问这两个包方法，例如 react.Component 或 react.PureComponent

我也尝试过使用 expose-loader，但结果与上面相同，除非我配置不正确。

关于如何正确配置 webpack 以实现此目的有什么想法吗？

Answer 1

如果我理解正确你想做什么，你可以设置一个，比方说，bundle-source.js 结构如下：

exports.react = require('react');
exports['react-dom'] = require('react-dom');
exports.anyModule = require('anyModule');

然后将 bundle-source.js 设置为 webpack conf 的入口点：

module.exports = {
  entry: [ '...path-to...bundle-source.js' ],
  output: {
    path: __dirname + '/public',
    publicPath: 'http://localhost:8081/public/',
    filename: 'bundle.js',
    libraryTarget: 'umd',
  }
};

如何将 npm 包与 webpack 捆绑在一起并作为对象公开？

How to bundle npm packages with webpack and expose as an object?

javascript

npm

webpack

webpack-2