babel-plugin-extend-scope-chain

babel-plugin-extend-scope-chain

Namespaces global variable declarations.

• Example transpilations
• Motivation
• Configuration

A lot like using with statement to add window expression to the scope chain, e.g. with (window) { /* your script */ }.

Example transpilations

global foo assignment expression

Input:

foo = "bar";

Output:

window.foo = "bar";

global foo.bar assignment expression

Input:

foo.bar = "bar";

Output:

window.foo.bar = "bar";

assignment in program scope

Input:

var foo = "bar";

Output:

window.foo = "bar";

Motivation

To bundle external scripts.

A specific use case for which this was developed is to bundle external supply-side platform (SSP) scripts into the main script. This enables us to decrease the amount of HTTP requests that are required to start header bidding.

The problem is that all vendor scripts assume that the script is loaded asynchronously, using script tags, e.g.

const scriptElement = document.createElement('script');
scriptElement.async = true;
scriptElement.src = '//script.js';
document.head.appendChild(scriptElement);

This assumption allows them to write code such as:

var foo = foo || 'bar';

In the above example, if foo is not set, window.foo becomes {}.

We want to bundle and delay these script execution, i.e.

function loadVendorFoo () {
  var foo = foo || 'bar';
}

The above code breaks, because now foo is isolated to loadVendorFoo scope, i.e. in the above code foo will always equal "bar".

Using this transpiler, we namespace all global variable declarations using window object, i.e. our script becomes:

function loadVendorFoo () {
  var foo = window.foo = window.foo || 'bar';
}

Configuration

Name	Type	Description	Default
globals	Array<string>	Names of global variables that must not be namespaced.	['window']
export	boolean	Wraps the script body in a function and exports the function using module.exports.	false