Last active
February 1, 2016 19:05
-
-
Save Sigfried/5c96b880d7986776e541 to your computer and use it in GitHub Desktop.
problem with webpack handling array extensions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /node_modules/ | |
| bundle.js |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Webpack seems to mess up objects of classes that | |
| extend Array. This should work, I believe, and it | |
| does work in node and in jsfiddle: | |
| https://jsfiddle.net/sigfried/n2pab49q/ | |
| Install and run: | |
| git clone https://gist.github.com/Sigfried/5c96b880d7986776e541 | |
| cd 5c96b880d7986776e541 | |
| npm install | |
| npm run build | |
| Then point your browser at http://localhost:8080/webpack-dev-server/ | |
| and open the console. | |
| To see it working on node: | |
| node index.js |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Webpack ES6 Array Extend Bug Example</title> | |
| </head> | |
| <body> | |
| <div id="example"></div> | |
| <script src="bundle.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "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 = `<h2>${twothings.toString()}</h2>`; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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": "[email protected]: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-plugin-transform-builtin-extend": "^1.1.0", | |
| "babel-polyfill": "^6.3.14", | |
| "babel-preset-es2015": "^6.0.12", | |
| "babel-preset-stage-0": "^6.3.13", | |
| "webpack": "^1.12.10", | |
| "webpack-dev-server": "^1.14.1" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"], | |
| }] | |
| ] | |
| } | |
| }, | |
| ] | |
| }, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment