Javascript 带有模块和主传输的网页包
我发现出于某种原因,webpack在Javascript 带有模块和主传输的网页包,javascript,webpack,babeljs,Javascript,Webpack,Babeljs,我发现出于某种原因,webpack在package.json上倾向于module而不是main 我们有很多库导出ES6中的模块和主传输,但我们最终没有传输这些内容。以两个著名的React模块为例,例如或 我可以看出我并没有违反惯例,但我很惊讶没有多少人会遇到这种情况。如果SSR已就位,React需要在浏览器和节点上运行,因此我不确定如何在此处继续 此处的示例库: 在babel loader上包含node_模块和执行上述解决方案中指示的切换似乎与其他任何事情都背道而驰,这再次让我感到惊讶 我找到
package.json
上倾向于module
而不是main
我们有很多库导出ES6中的模块和主传输,但我们最终没有传输这些内容。以两个著名的React模块为例,例如或
我可以看出我并没有违反惯例,但我很惊讶没有多少人会遇到这种情况。如果SSR已就位,React需要在浏览器和节点上运行,因此我不确定如何在此处继续
此处的示例库:
在babel loader上包含node_模块和执行上述解决方案中指示的切换似乎与其他任何事情都背道而驰,这再次让我感到惊讶
我找到的唯一部分解决方案是不排除babel loader
上的node\u模块
,但这似乎可能会对我不利
以下是网页包配置的相关部分
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或my Library的正确方法是什么。我不介意改变所有的库,只要它是一个已知的标准或者我们这里可能缺少的东西。好吧,现在的标准是提供
pkg.main
作为网页包的输出完全传输和捆绑,并且pkg.module
指向传输但不捆绑的输出
请记住,pkg.module
只应具有来自ES6的导入/导出功能,而不应具有其他功能(如箭头功能)。不幸的是,webpack没有提供任何方式来输出这样的东西。它总是把它放在\uuu网页\uu需要的东西上
如您所知,如果这是一个您只使用的私有库,您当然可以通过包含node\u modules/yourlibrary
来调整应用程序的配置以在库上运行babel。我不认为公共图书馆应该强制客户端每次都传输它,特别是如果有特定的规则或插件应该应用的话
库使用的另一种解决方案是只获取源代码并在其上运行babel,而不使用任何网页。这当然会起作用,但具有特定网页包(如别名等)的高级配置将失败
另一种解决方案是使用rollup作为库的绑定器,这些库似乎具有这些现成的功能
如果你感兴趣的话,有一个开放的网页,里面有更多的信息
也是“汇总”中描述此概念的页面。您的实际问题是什么?另外,看看webpack的targets
属性:谢谢你的问题Matthew,你是对的。我在结尾处编辑并添加了我的问题。关于target,我们只使用webpack作为浏览器,但有些库可以共享使用。