带有模块和主编译功能的Webpack

时间:2019-01-11 08:58:39

标签: javascript webpack babel

我发现由于某些原因,webpack偏爱module上的main而不是package.json

我们有很多库可以在ES6中导出模块并进行主编译,但是最终导致某些东西没有被编译。接受几个著名的React模块,例如React BootstrapReact Toolbox

我可以看到我并没有违反约定,但令我惊讶的是,没有多少人遇到这种情况。如果已安装SSR,React需要同时在浏览器和节点上运行,所以我不确定如何继续进行操作。

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

在babel loader上包括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或我的库的正确方法是什么?我不介意更改所有库,只要它是已知标准或我们在此处可能会遗漏的内容即可。

1 个答案:

答案 0 :(得分:0)

好吧,目前的标准是提供pkg.main作为Webpack的输出进行完全转译和捆绑,并pkg.module指向已转译但未捆绑的输出。

请记住,pkg.module仅应具有ES6功能中的import/export,而不能具有其他功能(如箭头功能)。不幸的是,webpack没有提供任何输出这种东西的方法。总是把它放在__webpack_require__上。

如您所知,如果这是您仅使用的私有库,则可以通过包含node_modules/yourlibrary来调整应用程序的配置以在该库上运行babel。我认为公共图书馆不应该强迫客户每次都将其转译,特别是在有特定规则或插件应适用的情况下。

库使用的另一种解决方案是仅获取源代码并仅在其之上运行babel,而无需任何webpack。当然可以,但是带有webpack细节(如别名等)的高级配置只会失败。

另一种解决方案是使用汇总作为似乎具有这些功能的库的捆绑程序。

在webpack中有一个issue打开的页面,如果您被吸引,则会提供更多信息。

Here也是汇总中描述此概念的页面。