Webpack ES6 Array Extend Bug Example

100%

Webpack ES6 Array Extend Bug Example

✓ Published0🌍 Public

Last edited Feb 1, 2016

Created on Feb 1, 2016

This example demonstrates a bug where Webpack’s Babel transpilation corrupts ES6 classes that extend the built-in Array constructor. It shows that a `ThingArray` instance, created via `new ThingArray(['baz', 42])`, loses its subclass identity when passed to a test function, even though the console displays `ThingArray` in the debugger. The code uses `babel-plugin-transform-builtin-extend` with the `globals: ["Array"]` option and `babel-preset-es2015` to compile the class, while comparing behavior between a browser running `webpack-dev-server` and plain Node execution. The page renders the array’s string representation into a div via `document.getElementById`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Gist e9ca6a4ec4fe6c3bee98

This example shows how a JavaScript module with reserved-word property names—specifically `await`—triggers a parsing error during Rollup’s build pipeline, while the same names work in object literals. The code includes an `index.js` file defining an exported object with methods named `await` and `add`, and a `rollup.config.js` that applies the `rollup-plugin-babel` with the `es2015-rollup` preset via `.babelrc`. The visualization highlights the exact source-map error location from Rollup’s parser, contrasting valid syntax with the failing line. It uses Rollup’s plugin system and Babel’s preset configuration to demonstrate the issue.

HHypercubed

59% match

Loading thumbnail…

The correct way to compile ES6 using babel...

This example shows how to configure Babel and Webpack to compile ES6 code into three separate module formats for different consumption contexts. It demonstrates three distinct build targets—Node.js unbundled, Node.js bundled, and browser bundled—each with its own Babel preset and package.json entry point. The code specifies `babel-preset-env` with environment-specific targets like `node: "6.10"` or `browsers: "last 2 versions, ie 10-11"`, and uses the `modules: false` option to enable tree shaking. The accompanying `package.json` and `webpack.config.js` files illustrate how to wire these build scripts together, with Webpack automatically selecting the appropriate entry point (`main`, `module`, or `browser`) based on the `target` setting.

66ewis

57% match

Loading thumbnail…

Babel Interop Defaults might lead to confusion with ES6 Modules and imports/exports

This example shows how Babel’s default interop behavior can make ES6 module imports behave unexpectedly, producing a value where the spec would yield `undefined`. The code defines `export.js` with a default export object, then in `module-b.js` imports a named `x` via `import {x} from './module-a'`. With default Babel settings, `console.log(x)` outputs `8`, because Babel sets both `module.exports` and `exports["default"]`. The example contrasts this with vanilla ES6, where the import would fail, and shows the explicit double export needed for spec-compliant behavior.

RRestuta

57% match

Loading thumbnail…

JavaScripts Arrays

A web page titled "JavaScripts Arrays" demonstrates a minimal console-based interaction with JavaScript’s `typeof` operator. The page renders a single large, centered text message—"object"—as the visual output. The underlying code logs `typeof[]` to the browser’s developer console, showing that an empty array returns the string "object." The example uses plain HTML, CSS, and JavaScript, with no external libraries or data sources, to illustrate a fundamental type-checking behavior.

EEduard

55% match

Loading thumbnail…

webpack configuration for webpack-es6-boilerplate

This example shows a minimal webpack configuration for the webpack-es6-boilerplate, defining how JavaScript source files are bundled. It sets the entry point to `babel-polyfill` and `./app/index.js`, outputs a single `bundle.js` to a `build` directory, and uses `babel-loader` to transpile `.js` files while excluding `node_modules`. The configuration also includes a development server on port 3000 serving from `./build` with inline mode enabled. The code directly references the webpack API, including `module.exports`, the `entry`, `output`, `module.loaders`, and `devServer` properties.

115Dkatz

55% match

Loading thumbnail…

Gist ed016e61300636e5a809

This example presents a JavaScript quiz that tests understanding of type coercion, string concatenation, and array manipulation. The visualization shows a series of code samples with their expected return values and written explanations, demonstrating behaviors like `typeof` returning "number" for `NaN`, string concatenation with numbers, and the effects of `pop()`, `push()`, `unshift()`, `join()`, and `split()`. The data is a static Gist containing plain text code questions and answers, rendered as a linear educational reference. No external libraries or frameworks are used; it relies purely on the raw text structure of the gist.

RRyan-321

54% match

Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

BBart van Pelt

54% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

AAlsaxian

53% match