Babel 7为什么不编译node_modules文件? [英] Why is Babel 7 not compiling node_modules files?

问题描述

我在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中已弃用该软件包

请帮助我

推荐答案

为了在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文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！