psychology dector

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...

The following ECMAScript proposal is at stage 3 : “ Trailing commas in function parameter lists and calls ” by Jeff Morrison. This blog post explains it. Trailing commas in object literals and Array literals Trailing commas are ignored in object literals: let obj = { first: 'Jane', last: 'Doe', }; And they are also ignored in Array literals: let arr = [ 'red', 'green', 'blue', ]; console.log(arr.length); // 3 Why is that useful? There are two benefits. First, rearranging items is simpler, because you don’t have to add and remove commas if the last item changes its position. Second, it helps version control systems with tracking what actually changed. For example, going from: [ 'foo' ] to: [ 'foo', 'bar' ] leads to both the line with 'foo' and the line with 'bar' being marked as changed, even though the only...

The ECMAScript proposal “ String padding ” by Jordan Harband & Rick Waldron is part of ECMAScript 2017 . This blog post explains it. Padding strings Use cases for padding strings include: Displaying tabular data in a monospaced font. Adding a count or an ID to a file name or a URL: 'file 001.txt' Aligning console output: 'Test 001: ✓' Printing hexadecimal or binary numbers that have a fixed number of digits: '0x00FF' String.prototype.padStart(maxLength, fillString=' ') This method (possibly repeatedly) prefixes the receiver with fillString , until its length is maxLength : > 'x'.padStart(5, 'ab') 'ababx' If necessary, a fragment of fillString is used so that the result’s length is exactly maxLength : > 'x'.padStart(4, 'ab') 'abax' If the receiver is as long as, or longer than, maxLength , it is returned unchanged: > 'abcd'.padStart(2, '#') 'abcd'...

The following ECMAScript proposal is at stage 4 : “ Object.values/Object.entries ” by Jordan Harband. This blog post explains it. Object.entries() This method has the following signature: Object.entries(value : any) : Array<[string,any]> If a JavaScript data structure has keys and values then an entry is a key-value pair, encoded as a 2-element Array. Object.entries(x) coerces x to an Object and returns the entries of its enumerable own string-keyed properties, in an Array: > Object.entries({ one: 1, two: 2 }) [ [ 'one', 1 ], [ 'two', 2 ] ] Properties, whose keys are symbols, are ignored: > Object.entries({ [Symbol()]: 123, foo: 'abc' }); [ [ 'foo', 'abc' ] ] Object.entries() finally gives us a way to iterate over the properties of an object ( read here why objects aren’t iterable by default ): let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) { console.log(`${JSON.stringify(k...