webpack babel jsnext :main and dependencies transpiling

Question

我上周打开了以下问题，但似乎没有人知道答案:

• github.com/babel/babel-loader/issues/488
• github.com/webpack/webpack/issues/2902

我真的不明白 webpack/babel-loader 在 node_modules 中转换依赖项的当前状态，谁能解释一下？我试图坚持在任何地方打开的每个问题。

1. webpack/babel-loader 是否转译 jsnext:main 文件？
2. 如果是，是 webpack/babel-loader 转译 node_modules 中的 jsnext:main 文件，即使 node_modules 是否在排除键中？

我的情况:

rules: [{
    test: /\.(js|mjs)$/i,
    exclude: [/node_modules/],
    use: [{
        loader: 'babel-loader', //settings specified in package.json
    },{
        loader: 'eslint-loader', //settings specified in package.json
    }
}]

在我的依赖项 package.json 中，我尝试了:

"main": "index.js", <= not working (not transpiled)
"jsnext:main": "index.js", <= not working (not transpiled)
"module": "index.js", <= not working (not transpiled)

如果不删除 exclude: [/node_modules/], 两者都无法工作，但由于无限的编译时间，这不能用于任何中型到大型项目。

但是然后:为什么 https://github.com/lodash/lodash/blob/es/package.json与我的https://github.com/damianobarbati/react-create-app/blob/master/package.json有什么不同？lodash-es 即使在 node_modules 中也被转译(并被排除在外)，但我的 react-create-app 不是:救命!

Answer 1

当您从规则中排除 node_modules 时，babel-loader 不会转译 node_modules 中的任何内容。 jsnext:main 或 module 等字段与加载程序/规则无关。导入包时，webpack 根据 resolve.mainFields 决定应该使用哪个文件。然后它将检查应将哪些规则应用于该文件。通常这些文件已经被转译，除了它们包含 ES 模块(参见 Rollup - pkg.module )。

如果你想转译任何有 module 或 jsnext:main 字段的模块，你可以使用来自 Jason Miller 的规则 developit/transpile-esnext-modules.js决定是否包含模块(include 和 exclude 也接受一个函数)。