为什么 Babel 7 不编译 node_modules 文件？

Question

我在 IE11 SCRIPT1002 中有错误：语法错误（类语法问题）。 我的简单代码有 2 行：

import { struct } from 'superstruct';
console.log('finished');

我不希望我的 babel7 将类编译成 ES5 代码

我试过写 .babelrc 文件：

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

和https://babeljs.io/docs/en/babel-plugin-transform-classes 也没有修复

更新： 我试过使用 @babel/plugin-preset-es2015 来转换 ES5 代码中的类，但是这个包在 babel7 中被弃用了

请帮帮我

Answer 1

为了在 Babel 7 中转换 node_modules 和子包，您需要使用 babel.config.js 文件而不是 .babelrc 文件。

请参阅此 issue comment 和 project-wide configuration 上的 babel 文档。具体

Babel 7.x 中的新功能，Babel 具有“根”目录的概念，默认为当前工作目录。对于项目范围的配置，Babel 会自动在这个根目录中搜索“babel.config.js”。

...

因为项目范围的配置文件与配置文件的物理位置是分开的，所以它们非常适合必须广泛应用的配置，甚至允许插件和预设轻松应用于 node_modules 或符号链接包中的文件，这些文件是传统上在 Babel 6.x 中配置非常痛苦。

简而言之，.babelrc 用于本地项目文件转换（不包括node_modules），而babel.config.js 应被视为项目范围，并且在捆绑时将应用于包依赖项（node_modules） .这有点令人困惑，但希望对您有所帮助！

编辑

这里有更多关于使用 webpack 构建示例文件的完整项目配置的信息。请注意，如果您在此处使用.babelrc 而不是babel.config.js，它将不起作用。运行webpack-cli 会生成一个不使用class 关键字的脚本script.out.js。

脚本.js

import { struct } from 'superstruct';
console.log('finished');

babel.config.js

module.exports = {
    "presets": [
        [
            "@babel/preset-env",
            {
                    "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
};

webpack.config.js

module.exports = {
    entry: './script.js',
    output: {
        path: __dirname,
        filename: 'script.out.js',
    },
    module: {
        rules: [ {
            test: /\.m?js$/,
            use: {
                loader: 'babel-loader'
            }
        } ]
    }
}

包依赖

"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"superstruct": "^0.6.0",
"webpack-cli": "^3.2.3"