babel 7不会在node_modules中编译ES6类

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/zh-CN/babel-plugin-transform-classes也未修复

更新：我尝试使用@ babel / plugin-preset-es2015在ES5代码中转换类，但是babel7中不推荐使用此包

请帮帮我

Answer 1

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

请参阅此问题注释和有关项目范围配置的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产生的脚本script.out.js不使用class关键字。

script.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"