Javascript Babel未将导入的节点_模块传输到ES5-包括ES2015语法

我的babel+webpack配置工作正常，但生成的包在IE11中无法运行，因为它包含

const

声明。我认为拥有

es2015

预设就足以解决这个问题了？运行

$（npm-bin）/babel test/some-es2015.js

会产生严格的ES5.1代码，因此babel似乎可以工作，但IE11中的实际代码是在从

节点导入的模块中

在生成的bundle中对
'const'
进行grepping时，我会得到如下某些行（eval是由于eval源映射所致）：

需要注意的重要部分是
const validator=
之类的内容。这不是ES5.1语法。我自己的代码似乎已经传输到ES5了。我可以在
/node\u modules/tcomb additional types/lib/string/ip.js
中看到这个文件，它们使用
const
，因此这不是Babel添加的
const
，而是包含它们的源代码。其他大多数软件包都是ES5

到目前为止，我发现大多数
const
s都来自
materialui
和
tcomb其他类型

Babel.babelrc:

{
    "compact": false,
    "presets": [
        "es2015",
        "es2017"
    ],
    "plugins": [
        ["transform-runtime", {
            "polyfill": false,
            "regenerator": true
        }],
        "transform-class-properties",
        "transform-react-jsx",
        "transform-object-rest-spread"
    ]
}

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

/** @returns {String} an absolute path */
function toRoot(rootRelativeDir) {
  return path.resolve(__dirname, '..', rootRelativeDir);
}

module.exports = {
  entry: ['./src/app.js', './styles/flex.less'].map(toRoot),
  output: {
    filename: 'bundle.js',
    path: toRoot('.webpack/dist')
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {}
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              /* General options are read using .babelrc - only webpack loader specific here */
              cacheDirectory: toRoot('.webpack/babel_cache')
            }
          }
        ]
      }
    ]
  },
  plugins: [new CopyWebpackPlugin([toRoot('public')])]
};

网页包配置：

{
    "compact": false,
    "presets": [
        "es2015",
        "es2017"
    ],
    "plugins": [
        ["transform-runtime", {
            "polyfill": false,
            "regenerator": true
        }],
        "transform-class-properties",
        "transform-react-jsx",
        "transform-object-rest-spread"
    ]
}

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

/** @returns {String} an absolute path */
function toRoot(rootRelativeDir) {
  return path.resolve(__dirname, '..', rootRelativeDir);
}

module.exports = {
  entry: ['./src/app.js', './styles/flex.less'].map(toRoot),
  output: {
    filename: 'bundle.js',
    path: toRoot('.webpack/dist')
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {}
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              /* General options are read using .babelrc - only webpack loader specific here */
              cacheDirectory: toRoot('.webpack/babel_cache')
            }
          }
        ]
      }
    ]
  },
  plugins: [new CopyWebpackPlugin([toRoot('public')])]
};

同样的问题也发生在我身上。某些节点模块不提供浏览器支持和利用较新ES语法的目标节点版本

我遇到了一个方便的包，它可以传输节点模块代码：


它解决了我关于IE11支持的问题，希望对我有所帮助。
我的根本问题是，一些节点包没有使用ES5语法编写，而Babel转换出于某种原因没有对它们进行转换。这是一个

找到这一切发生的原因很容易（文森特的回答很有帮助）；我在配置中有
exclude:/node\u modules/
。当然，删除它会“修复”问题，但它会引入新的问题，因为
排除
是有原因的，因为您不希望Babel处理其中的每个文件

所以你想要的是：选择性过滤，允许一些模块

试图构造一个regex，允许在node_模块下列出包，但限制其余的包是很麻烦且容易出错的。谢天谢地，描述条件规则（其中
exclude
是其中之一）可以


字符串：要匹配输入，必须以提供的字符串开头。即。绝对目录路径，或文件的绝对路径
RegExp：它使用输入进行测试
一个函数：它是用输入调用的，必须返回一个真实值才能匹配
条件数组：至少一个条件必须匹配
对象：所有属性必须匹配。每个属性都有一个已定义的行为

创建这样一个函数很容易！因此，我没有使用
exclude:/node_modules
，而是将其更改为
exclude:excludeCondition
，其中
excludeCondition
是以下函数：

function excludeCondition(path){

  const nonEs5SyntaxPackages = [
    'material-ui',
    'tcomb-additional-types'
  ]

  // DO transpile these packages
  if (nonEs5SyntaxPackages.some( pkg => path.match(pkg))) {
    return false;
  }

  // Ignore all other modules that are in node_modules
  if (path.match(toRoot("node_modules"))) { return true; }

  else return false;
}

这解决了我的问题，因为只有少量使用ES2015语法的软件包，所以将它们添加到白名单是可以管理的。
我也遇到了类似的问题，我通过将
.babelrc.js
重命名为
babel.config.js
解决了这个问题

显然，
.babelrc
的作用域比
babel.config.js
小，如果您想了解更多信息，请查看以下帖子：

这似乎是一个没有真正解决这个问题的黑客，因为它所做的只是为node_模块启用babel转换，但阅读页面让我找到了正确的方向。当然是我的配置错了（我知道，但不是哪一行）：罪魁祸首当然是
exclude:/node\u modules/
。我需要有选择地启用我需要传输的模块，这似乎是我自己遇到的。但是您的
toRoot（）
函数在做什么？似乎不是babel内置的东西？
toRoot（）
是我自己的自定义路径转换器，它只创建从包根开始的路径。我在一个子文件夹中有这个配置文件，因此这使我摆脱了大量的
。/../“
和
\uu dirname
等。