Javascript 极端的ES6阵列扩展怪异。它仅恢复为带有网页包的常规数组

Javascript 极端的ES6阵列扩展怪异。它仅恢复为带有网页包的常规数组,javascript,arrays,class,ecmascript-6,webpack,Javascript,Arrays,Class,Ecmascript 6,Webpack,[在对问题进行简化并找到答案后,我重新编写了这个问题。下面Bergi的有用评论引用了旧版本。] Webpack似乎弄乱了扩展数组的类的对象。我相信这应该是可行的,而且它在node和JSFIDLE中都是可行的: 早期的代码和我对问题的理解要复杂得多。 我不知道我做错了什么。Bergi鼓励我简化,根据我在下面添加的答案,它看起来像一个网页错误。但为了防止我错误地使用webpack,我将包括我的webpack.conf.js和package.json var webpack = require('

[在对问题进行简化并找到答案后,我重新编写了这个问题。下面Bergi的有用评论引用了旧版本。]

Webpack似乎弄乱了扩展数组的类的对象。我相信这应该是可行的,而且它在node和JSFIDLE中都是可行的:

早期的代码和我对问题的理解要复杂得多。 我不知道我做错了什么。Bergi鼓励我简化,根据我在下面添加的答案,它看起来像一个网页错误。但为了防止我错误地使用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"
    }
  }

loganfsmyth是对的,我想他写了这篇文章之后,欢迎他提醒我远离它。在Babel slack频道,他帮我找到了如何让它工作的方法,它完全解决了问题。这是我的新webpack.conf.js。除了babel插件转换内置扩展外,我还必须添加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"],
              }]
            ]
          }
        },
      ]
    },
  }

此要点通过以下网页运行问题的示例代码:。取出polyfill和变换内置扩展,它将在浏览器中再次失败,但在节点中不会

扩展本机类型(如
Array
)的功能是ES6的一个全新功能,并且只能使用真正的ES6类语法。因为它只能使用真正的ES6类,所以它也是不可翻译的

它在Node中工作是因为您的V8版本支持本机类,而在Webpack中不工作是因为不存在符合规范的方法使它在ES5中工作


如果你真的想尝试破解它,你可以使用类似的东西,但实际上我不推荐,因为你会自找麻烦。如果您需要代码在新旧环境中保持一致,最好不要对内置构造函数进行子类化。

很抱歉,但是如果您无法为我们提供复制此代码的代码,我们几乎无法为您提供帮助。调试器映像中有代码。我认为您不需要一千行代码,这就是为什么我试图在一个简短的示例中复制这个问题。如果我知道这一千行中的哪一部分,我会的。如果有人能建议我在两个调试器映像中显示的内容如何发生,这可能会帮助我找到问题所在。只要问题仍然存在,请尝试通过反复删除一半代码来解决问题。对。我有时也这么做。我试试看。另一个提示,可能没有多大帮助:我的代码所在的库在node.js测试套件中也可以正常工作,但当我从react组件调用它时,它就会崩溃。所以我将开始尝试按照您的建议使用react代码。这意味着我根本不应该尝试为浏览器友好的代码扩展数组?
  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"],
              }]
            ]
          }
        },
      ]
    },
  }