Webpack与模块和主要翻译

Question

我发现,由于某些原因,有利于的WebPack module而不是main上package.json.

我们有很多库在ES6中导出模块并且主要编译,但我们最终还是没有被编译的东西.采用几个着名的React模块,如React Bootstrap或React Toolbox

我可以看到我不会违反常规,但我很惊讶没有多少人碰到这个.如果SSR到位,React需要在浏览器和节点上运行,所以我不知道如何继续.

示例库在这里:https: //github.com/firstandthird/domodule/blob/master/package.json#L6

包括babel加载器上的node_modules和执行上述解决方案中指示的切换的两者似乎都违背了所有其他事情,这再次让我感到惊讶.

我发现只有部分解决方案是不排除node_modules,babel-loader但似乎它可能会让我反感.

这是Webpack配置的相关部分.

module.exports = config => ({
  test: /\.m?js$/,
  use: {
    loader: 'babel-loader',
    options: {
      babelrc: false,
      configFile: false,
      presets: [
        [
          '@babel/preset-env',
          {
            targets: config.browserlist,
            useBuiltIns: false,
            modules: false,
            exclude: ['transform-typeof-symbol']
          }
        ]
      ],
      cacheDirectory: true,
      cacheCompression: config.minify,
      compact: config.minify
    }
  }
});

问题是,配置Webpack或我的库的正确方法是什么.我不介意改变所有的库,只要它是一个已知的标准或我们可能在这里丢失的东西.

Answer 1

好吧，现在的标准是提供pkg.main完全转译和捆绑的 webpack 输出，并pkg.module指向转译但未捆绑的输出。

请记住，它pkg.module应该只具有import/exportES6 功能，而不具有其他功能（例如箭头函数）。不幸的是 webpack 没有提供任何方法来输出这样的东西。它总是把它的__webpack_require__东西。

正如您所发现的，您当然可以调整应用程序的配置以在库上运行 babel，方法是包含node_modules/yourlibrary这是否是您只使用的私有库。我不认为公共图书馆应该强制客户端每次都进行转译，特别是如果有特定的规则或插件应该适用的话。

库使用的另一个解决方案是仅获取源代码并仅在其之上运行 babel，而不使用任何 webpack。这当然可以，但是带有 webpack 细节（如别名等）的高级配置将会失败。

另一个解决方案是使用 rollup 作为库的捆绑器，这些库似乎具有开箱即用的这些功能。

如果您有兴趣，webpack 中有一个未解决的问题，其中包含更多信息。

这里还有一个来自汇总的页面描述了这个概念。