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