psychology dector

This blog post examines how the bundling of modules is affected by two future developments: HTTP/2 and native modules. Why we bundle modules Bundling modules means combining several files with modules into a single file. That is done for three reasons: Fewer files need to be retrieved in order to load all modules. Compressing the bundled file is slightly more efficient than compressing separate files. During bundling, unused exports can be removed, potentially resulting in significant space savings. JavaScript modules With ECMAScript 6, JavaScript finally got built-in modules (I’m calling them JavaScript modules for the remainder of this blog post). However, that feature is currently in a strange position: On one hand, ES6 fully standardized their syntax and much of their semantics. They have become a popular format for writing modules and their static structure enables the automatic omission of unused exports (also known as “tree-shaking” in the JavaScript world). On the other hand, ...

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