我发现由于某些原因,webpack偏爱module
上的main
而不是package.json
。
我们有很多库可以在ES6中导出模块并进行主编译,但是最终导致某些东西没有被编译。接受几个著名的React模块,例如React Bootstrap或React 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或我的库的正确方法是什么?我不介意更改所有库,只要它是已知标准或我们在此处可能会遗漏的内容即可。
答案 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也是汇总中描述此概念的页面。