psychology dector

In this blog post, you’ll learn: How a proposed “spec mode” for Babel makes transpiled ES modules more spec-compliant. That’s a crucial step in preparing for native ES modules. How ES modules and CommonJS modules will interoperate on Node.js. How far along ES module support is on browsers and Node.js. Transpiling ES modules to CommonJS via Babel At the moment, the main way to use ES modules on Node.js and browsers is to transpile them to CommonJS modules via Babel. The benefit of this approach is that integration with the CommonJS ecosystem, including npm modules, is seamless. On the flip side, the code that Babel currently generates does not comply with the ECMAScript specification. That is a problem, because code that works with Babel now, won’t work as native modules. That’s why Diogo Franco has created a pull request that adds a so-called “spec mode” to transform-es2015-modules-commonjs . Modules transpiled in this mode conform as closely to the spec as is possible without using E...

As of version 6, Babel supports presets , sets of features that can be enabled together. This blog post looks at three new useful Babel presets (and, as a bonus, two presets especially for Node.js). Complementing or replacing babel-preset-es2015 These two presets are useful complements to babel-preset-es2015 (for ES6): babel-preset-es2016 gives you one of the two features of ES2016: the exponentiation operator . The other feature, Array.prototype.includes() , is supported via the standard library polyfill . babel-preset-es2017 gives you: babel-plugin-syntax-trailing-function-commas : optional trailing commas in parameter lists and function/method calls. babel-plugin-transform-async-to-generator : async functions . This is the one feature after ES6 that I’m most looking forward to. Note that if you want all of ES2017 (as much as it is supported by Babel) then you need three presets: es2015 , es2016 and es2017 . Alternatively, there is also a meta-preset: babel-preset-latest will a...

Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking , excluding unused exports from bundles. Rollup depends on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused. Tree-shaking for webpack is currently in beta. This blog post explains how it works. The project we are going to examine is on GitHub: tree-shaking-demo How webpack 2 eliminates unused exports webpack 2, a new version that is in beta, eliminates unused exports in two steps: First, all ES6 module files are combined into a single bundle file. In that file, exports that were not imported anywhere are not exported, anymore. Second, the bundle is minified, while eliminating dead code. Therefore, entities that are neither exported nor used inside their modules do not appear in the minified bundle. Without the first step, dead code elimination would never remove exports (registering an export keeps it alive)....

This blog post examines how Babel ensures that code it transpiles interoperates properly with normal CommonJS modules. Consult chapter “ Modules ” in “Exploring ES6” for more information on ES6 modules. Starting point for this series of posts on Babel : “ Configuring Babel 6 ” ES6 modules vs. CommonJS modules ECMAScript 6 modules Default export (single export): // lib.js export default function () {} // main.js import lib from './lib'; Named exports (multiple exports): // lib.js export function foo() {} export function bar() {} // main1.js import * as lib from './lib'; lib.foo(); lib.bar(); // main2.js import {foo, bar} from './lib'; foo(); bar(); It is possible to combine both styles of exports, they don’t conflict with each other. CommonJS modules Single export: // lib.js module.exports = function () {}; // main.js var lib = require('./lib'); Multiple exports: ...

Babel’s loose mode transpiles ES6 code to ES5 code that is less faithful to ES6 semantics. This blog post explains how that works and what the pros and cons are (spoiler: normally not recommended). Starting point for this series of posts on Babel 6 : “ Configuring Babel 6 ” [explains the basics: configuration files, presets, plugins, etc.] Two modes Many plugins in Babel have two modes: A normal mode follows the semantics of ECMAScript 6 as closely as possible. A loose mode produces simpler ES5 code. Normally, it is recommended to not use loose mode. The pros and cons are: Pros: The generated code is potentially faster and more compatible with older engines. It also tends to be cleaner, more “ES5-style”. Con: You risk getting problems later on, when you switch from transpiled ES6 to native ES6. That is rarely a risk worth taking. Switching on loose mode The preset es2015-loose is the loose version of the standard ES6 preset, es2015 . The preset’s code provides a good overview of wha...

This blog post is outdated. Please read Chap. “ Babel: configuring standard library and helpers ” in “Setting up ES6”. This blog post explains how to configure how Babel 6 accesses its own helper functions and the ES6 standard library. The following GitHub repo lets you play with what’s explained here: babel-config-demo Starting point for this series of posts on Babel 6 : “ Configuring Babel 6 ” [explains the basics: configuration files, presets, plugins, etc.] External dependencies of transpiled code There are two external dependencies of the code produced by Babel that you’ll probably want to configure: On one hand, your code will usually invoke functionality of the ES6 standard library. For example: let m = new Map(); if (str.startsWith('/')) ··· The default is to assume that this functionality is available via global variables. On the other hand, Babel has helper functions that are called from the transpiled code. The default is to inline all invoked functions,...

Update: This series of blog post has been turned into the book “ Setting up ES6 ” (which is free to read online). Babel 6 is much more configurable than Babel 5, but also more difficult to configure. This blog post gives tips. Follow-up blog posts: [2015-12-11] Babel 6: configuring ES6 standard library and helpers [2015-12-12] Babel 6: loose mode [2015-12-13] Babel and CommonJS modules Installing Babel 6 The following are a few important npm packages. All Babel packages reside in a single repository on GitHub . Browsing their source code and their package.json files is instructive. babel-core : the core compilation machinery and plugin infrastructure for Babel. You will rarely need to install this package, because other packages such as babel-cli have it as a dependency, meaning that it will be automatically installed when they are installed. babel-cli : a command line interface to Babel . It includes the following commands: babel-doctor detects common problems with your Babel inst...