极端的 ES6 数组扩展怪异。它仅使用 webpack 恢复为常规数组

Question

[在简化并找到某种答案后，我正在重写问题。以下 Bergi 的有用 cmets 指的是旧版本。]

Webpack 似乎弄乱了扩展 Array 的类的对象。我相信这应该可以工作，并且它确实可以在节点和 jsfiddle 中工作：https://jsfiddle.net/sigfried/n2pab49q/2/

  "use strict";
  class ThingArray extends Array {
      constructor(data, parentThing) {
          super(data);
          console.log(`sending a [${this.constructor.toString().replace(/.\n[\w\W]*$/,'')}] to thing.method`);
          debugger; // in browser console, type this.constructor, it shows
                    // ThingArray, but the console.log above shows Array
          test(this);
      }
  }

  function test(ta) {
        console.log(`I'm expecting a ThingArray, and what I'm getting is a [${ta.constructor.toString().replace(/.\n[\w\W]*$/,'')}]`);
        console.log(`Is it a ThingArray? The answer is ${!!(ta instanceof ThingArray)}`);
  }

  let twothings = new ThingArray(['baz',42]);
  console.log(twothings);

  if (typeof window !== "undefined") {
      var div = document.getElementById('example');
      div.innerHTML = twothings;
  }

之前的代码和我对问题的理解要复杂得多。 我无法弄清楚我做错了什么。根据我在下面添加的答案，Bergi 鼓励我简化它，它看起来像一个 webpack 错误。但以防万一我使用错了 webpack，我将包含我的 webpack.conf.js 和 package.json

  var webpack = require('webpack');

  module.exports = {
    entry: [
      './index.js',
    ],
    output: {
        filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            presets: ['es2015']
          }
        },
      ]
    },
  };

  {
    "name": "array-extend-bug",
    "version": "0.0.1",
    "description": "problem with webpack handling array extensions",
    "main": "index.js",
    "scripts": {
      "build": "webpack-dev-server"
    },
    "repository": {
      "type": "git",
      "url": "git@gist.github.com:5c96b880d7986776e541.git"
    },
    "keywords": [
      "webpack",
      "es6",
      "bug"
    ],
    "author": "Sigfried Gold",
    "license": "MIT",
    "dependencies": {},
    "devDependencies": {
      "babel": "^6.3.26",
      "babel-core": "^6.0.12",
      "babel-loader": "^6.0.1",
      "babel-preset-es2015": "^6.0.12",
      "babel-preset-stage-0": "^6.3.13",
      "webpack": "^1.12.10",
      "webpack-dev-server": "^1.14.1"
    }
  }

Answer 1

扩展像 Array 这样的原生类型的能力是 ES6 的一个全新特性，并且只能使用真正的 ES6 类语法。因为它只能使用真正的 ES6 类，所以它也是不可转译的。

它可以在 Node 中工作，因为您的 V8 版本支持原生类，它在 Webpack 中不起作用，因为不存在使其在 ES5 中工作的符合规范的方法。

如果你真的想尝试破解它，你可以使用transform-builtin-extend 之类的东西，但我真的不推荐它，因为你会自找麻烦。如果您需要您的代码在新旧环境中始终如一地工作，最好不要子类化内置构造函数。

Answer 2

loganfsmyth 是对的，我猜他写了https://www.npmjs.com/package/babel-plugin-transform-builtin-extend，我想他很高兴警告我远离https://www.npmjs.com/package/babel-plugin-transform-builtin-extend。在 Babel slack 频道上，他帮助我弄清楚如何让它工作，它完全解决了问题。这是我的新 webpack.conf.js。除了 babel-plugin-transform-b​​uiltin-extend，我还必须添加 babel-polyfill。

  var webpack = require('webpack');

  module.exports = {
    entry: [
      'babel-polyfill',
      './index.js',
    ],
    output: {
        filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            presets: ['es2015'],
            plugins: [
              ["babel-plugin-transform-builtin-extend", {
                globals: ["Array"],
              }]
            ]
          }
        },
      ]
    },
  }

这个要点通过 webpack 运行问题中的示例代码：https://gist.github.com/Sigfried/5c96b880d7986776e541。取出 polyfill 和 transform-b​​uiltin-extend，它会在浏览器中再次开始失败，但在 node.js 中不会。