1

我有这个 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) {
4

1 回答 1

10

随着

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-runtimewhich 意味着 Babel 会将引用插入babel-runtime到您的代码中。问题是，如果没有exclude: /node_modules/,，或者至少exclude: /node_modules\/(?!babel-runtime)/,，你还告诉在自身内部babel-runtime插入对自身的引用，这会创建循环依赖，从而破坏代码。

于 2017-04-05T05:37:49.017 回答