babel 7不会在node_modules中编译ES6类 [英] babel 7 don't compile class ES6 which in node_modules

问题描述

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

I have error in IE11 SCRIPT1002: Syntax error (problem with class syntax). My simple code with 2 lines:

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

我不想将babel7编译类转换为ES5代码

I wan't that my babel7 compile class into ES5 code

我尝试编写.babelrc文件:

I have tried write .babelrc file :

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

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

更新: 我试过使用@ babel/plugin-preset-es2015，它可以转换ES5代码中的类，但babel7中已弃用该软件包

Update : I have tried use @babel/plugin-preset-es2015 which convert class in ES5 code but this package is deprecated in babel7

请帮助我

推荐答案

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

In order to transform node_modules and child packages in Babel 7 you need to use a babel.config.js file instead of a .babelrc file.

请参见问题注释和项目范围的配置.具体地

Babel 7.x的新功能，Babel将根"定义为根".目录，默认为当前工作目录.对于项目范围的配置，Babel将自动搜索"babel.config.js".在此根目录中.

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.

...

由于项目范围的配置文件与配置文件的物理位置分开，因此它们对于必须广泛应用的配置非常理想，甚至允许插件和预设轻松应用于node_modules或符号链接包中的文件.传统上，在Babel 6.x中进行配置非常麻烦.

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) .有点令人困惑，但希望能有所帮助！

The short of it is that .babelrc is used for a local project file transformations (not including node_modules) while babel.config.js should be considered project-wide and will apply to package dependencies when bundling (node_modules). It's a bit confusing but hopefully that helps!

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

Here's a bit more information on a full project config to build your example file using webpack. Note that if you use .babelrc instead of babel.config.js here it will not work. Running webpack-cli produces a script script.out.js that does not use the class keyword.

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

babel.config.js

babel.config.js

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

webpack.config.js

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"

这篇关于babel 7不会在node_modules中编译ES6类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！