Webpack 2.3.3 - TypeError: $export 不是函数答案

【问题标题】：Webpack 2.3.3 - TypeError: $export is not a functionWebpack 2.3.3 - TypeError: $export 不是函数
【发布时间】：2017-04-05 05:06:52
【问题描述】：

我有这个 Webpack 配置：

const path = require('path');

module.exports = {
  entry: ['babel-polyfill', './lib/index.js'],
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'suman.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['latest'],
          plugins: ['transform-runtime']
        }
      }
    ]
  },

  node: {
    assert: 'empty',
    buffer: 'mock',
    child_process: 'empty',
    cluster: 'empty',
    console: 'mock',
    constants: 'empty',
    crypto: 'empty',
    dgram: 'empty',
    dns: 'mock',
    domain: 'empty',
    events: 'empty',
    fs: 'empty',
    http: 'empty',
    https: 'empty',
    module: 'empty',
    net: 'mock',
    os: 'empty',
    path: 'empty',
    process: 'mock',
    punycode: 'mock',
    querystring: 'empty',
    readline: 'empty',
    repl: 'empty',
    stream: 'empty',
    string_decoder: 'empty',
    timers: 'empty',
    tls: 'mock',
    tty: 'mock',
    url: 'empty',
    util: 'empty',
    v8: 'mock',
    vm: 'empty',
    zlib: 'empty',
  }
};

我在命令行运行 $webpack 并得到一个输出文件，我将文件加载到浏览器中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Suman tests</title>
  <script src="../../../dist/suman.js"></script>
</head>
<body>

</body>
</html>

如果我在浏览器中加载这个 html 文件，我会得到：

suman.js:48039 Uncaught TypeError: $export is not a function
    at Object.<anonymous> (suman.js:48039)
    at __webpack_require__ (suman.js:20)
    at Object.<anonymous> (suman.js:46862)
    at __webpack_require__ (suman.js:20)
    at Object.hasOwnProperty (suman.js:12300)
    at __webpack_require__ (suman.js:20)
    at Object.<anonymous> (suman.js:10477)
    at __webpack_require__ (suman.js:20)
    at Object.<anonymous> (suman.js:12321)
    at __webpack_require__ (suman.js:20)

我在 Github 上查看了一堆问题，但似乎都没有解决问题。有谁知道有什么问题吗？

我使用的是 Webpack 版本 2.3.3。

附带说明 - 我在哪里可以找到一些适用于 Node.js / NPM 模块的 polyfill？

$export 似乎是 Webpack 生成的函数，下面是我的输出文件中出现的一些函数：

var global = __webpack_require__(10),
    core = __webpack_require__(58),
    hide = __webpack_require__(33),
    redefine = __webpack_require__(34),
    ctx = __webpack_require__(59),
    PROTOTYPE = 'prototype';

var $export = function $export(type, name, source) {
  var IS_FORCED = type & $export.F,
      IS_GLOBAL = type & $export.G,
      IS_STATIC = type & $export.S,
      IS_PROTO = type & $export.P,
      IS_BIND = type & $export.B,
      target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE],
      exports = IS_GLOBAL ? core : core[name] || (core[name] = {}),
      expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {}),
      key,
      own,
      out,
      exp;
  if (IS_GLOBAL) source = name;
  for (key in source) {

【问题讨论】：

什么是$export？如果这就是失败的原因，那就是开始的地方，而您还没有向我们展示代码。
您还应该考虑使用devtool: "source-map" 启用源映射，以便获得更好的堆栈跟踪。
@loganfsmyth $export函数不是我的代码，是webpack生成的代码，我给你个链接
@loganfsmyth 我更新了问题以回应您的评论，谢谢

标签： javascript node.js babeljs webpack-2 babel-loader

【解决方案1】：

随着

test: /\.js$/

你应该有

exclude: /node_modules/

如您在使用示例中所见：https://github.com/babel/babel-loader#usage

例如

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: ['latest'],
    plugins: ['transform-runtime']
  }
}

在这种情况下，您使用的是 transform-runtime，这意味着 Babel 会将对 babel-runtime 的引用插入到您的代码中。问题是，如果没有exclude: /node_modules/,，或者至少没有exclude: /node_modules\/(?!babel-runtime)/,，你也会告诉babel-runtime 插入对自身的引用inside，这会创建循环依赖，从而破坏代码。 p>

【讨论】：

hmmm，但我需要 node_modules，我有大量 node.js 代码需要进入浏览器......不知何故。
有没有办法在忽略/排除 node_modules 的同时让 node_modules（如异步模块、bluebird 等）进入浏览器？我认为 Webpack 的部分目的是为您捆绑 NPM 模块......
我很高兴忽略 node_modules，我只是想知道为什么它适合我的用例
这种情况下的排除是专门针对babel的，而不是针对整个Webpack的。我会更新问题。
哦，我明白了，嗯，我猜 webpack 仍然会从 node_modules 中获取源代码，babel 只是不会转换它们......