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

Question

我在 IE11 SCRIPT1002 中有错误:语法错误(类语法问题)。我的两行简单代码:

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 文档.具体

New in Babel 7.x, Babel has as concept of a "root" directory, which defaults to the current working directory. For project-wide configuration, Babel will automatically search for a "babel.config.js" in this root directory.

...

Because project-wide config files are separated from the physical location of the config file, they can be ideal for configuration that must apply broadly, even allowing plugins and presets to easily apply to files in node_modules or in symlinked packages, which were traditionally quite painful to configure in 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"