Skip to content

Commit

Permalink
Add dynamic import to examples
Browse files Browse the repository at this point in the history
  • Loading branch information
lukastaegert committed Aug 13, 2020
1 parent 7a7e15f commit 188ad34
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 42 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
* Freeze generated interop namespace objects (#3710)
* Always mark interop helpers as pure (#3710)
* Avoid default export interop if there is already an interop namespace object (#3710)
* Sort all `require` statements to the top in CommonJS output for easier back-transpilation to ES modules by other tools (#3710)

### Bug Fixes
* Deconflict the names of helper variables introduced for interop (#3710)
Expand Down
93 changes: 53 additions & 40 deletions docs/999-big-list-of-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -461,77 +461,87 @@ Controls how Rollup handles default, namespace and dynamic imports from external
To understand the different values, assume we are bundling the following code for a `cjs` target:

```js
import ext_default, * as external from 'external';
import ext_default, * as external from 'external1';
console.log(ext_default, external.bar, external);
import('external2').then(console.log);
```

Keep in mind that for Rollup, `import * as ext_namespace from 'external'; console.log(ext_namespace.bar);` is completely equivalent to `import {bar} from 'external'; console.log(bar);` and will produce the same code. In the example above however, the namespace object itself is passed to a global function as well, which means we need it as a properly formed object.

- `"esModule"` assumes that required modules are transpiled ES modules where the required value corresponds to the module namespace and the default export is the `.default` property of the exported object:

```js
var external = require('external');
var external = require('external1');
console.log(external['default'], external.bar, external);
Promise.resolve().then(function () {
return require('external2');
}).then(console.log);
```

When `esModule` is used, Rollup adds no additional interop helpers and also supports live-bindings for default exports.

- `"default"` assumes that the required value should be treated as the default export of the imported module, just like when importing CommonJS from an ES module context in Node. In contrast to Node, though, named imports are supported as well which are treated as properties of the default import. To create the namespace object, Rollup injects helpers:

```js
var external = require('external');
var external = require('external1');

function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}

var external__namespace = /*#__PURE__*/_interopNamespaceDefault(external);
console.log(external, external.bar, external__namespace);
Promise.resolve().then(function () {
return /*#__PURE__*/_interopNamespaceDefault(require('external2'));
}).then(console.log);
```

- `"auto"` combines both `"esModule"` and `"default"` by injecting helpers that contain code that detects at runtime if the required value contains the [`__esModule` property](guide/en/#outputesmodule). Adding this property is a standard implemented by Rollup, Babel and many other tools to signify that the required value is the namespace of a transpiled ES module:

```js
var external = require('external');
var external = require('external1');

function _interopNamespace(e) {
if (e && e.__esModule) { return e; } else {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
if (e && e.__esModule) { return e; } else {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
}

var external__namespace = /*#__PURE__*/_interopNamespace(external);
console.log(external__namespace['default'], external.bar, external__namespace);
Promise.resolve().then(function () {
return /*#__PURE__*/_interopNamespace(require('external2'));
}).then(console.log);
```

Note how Rollup is reusing the created namespace object to get the `default` export. If the namespace object is not needed, Rollup will use a simpler helper:
Expand All @@ -558,14 +568,17 @@ Keep in mind that for Rollup, `import * as ext_namespace from 'external'; consol
Here is what Rollup will create from the example code. Note that we removed `external.bar` from the code as otherwise, Rollup would have thrown an error because, as stated before, this is equivalent to a named import.

```js
var ext_default = require('external');
var ext_default = require('external1');

function _interopNamespaceDefaultOnly(e) {
return Object.freeze({__proto__: null, 'default': e});
return Object.freeze({__proto__: null, 'default': e});
}

var ext_default__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(ext_default);
console.log(ext_default, ext_default__namespace);
Promise.resolve().then(function () {
return /*#__PURE__*/_interopNamespaceDefaultOnly(require('external2'));
}).then(console.log);
```

- When a function is supplied, Rollup will pass each external id to this function once to control the interop type per dependency.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var external = require('external');
var other = require('./other.js');

Expand Down

0 comments on commit 188ad34

Please sign in to comment.