zertosh / babel-plugin-transform-inline-imports-commonjs

A Babel transform that turns imports into lazily loaded commonjs requires

babel-plugin-transform-inline-imports-commonjs

This plugin should be used instead of babel-plugin-transform-es2015-modules-commonjs

Installation

$ npm install babel-plugin-transform-inline-imports-commonjs

Details

This plugin transforms ES modules (import and export), into CommonJS require and module.exports. imports are transformed into lazily loaded memoized requires. So the require call is deferred until the imported identifier is referenced. This allows you to write idiomatic code without the performance costs of loading code up-front (I/O, parsing, and executing).

Transform example

Before:

import bigModule from 'big-module';

export default function(val) {
  return bigModule.doExpensiveThing(val);
}

After:

'use strict';

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

exports.default = function (val) {
  return (_bigModule || _bigModule2()).default.doExpensiveThing(val);
};

var _bigModule;

function _bigModule2() {
  return _bigModule = _interopRequireDefault(require('big-module'));
}

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Usage

Configuration

The same settings that are available for babel-plugin-transform-es2015-modules-commonjs are available for babel-plugin-transform-inline-imports-commonjs:

// without options
{
  "plugins": ["transform-inline-imports-commonjs"]
}

// with options
{
  "plugins": [
    ["transform-inline-imports-commonjs", {
      "allowTopLevelThis": true,
      "strict": false,
      "loose": true
    }]
  ]
}

Additional settings

• excludeModules:

  • An array of strings that correspond to module IDs that should not be "inline-import"'ed. For the config "excludeModules": ["atom"]:

  import {TextEditor} from 'atom'; // transforms to plain `require` with interop
  import foo from 'bar'; // transforms to inline import

• excludeNodeBuiltins (default: false)

  • Do not apply "inline-imports" to Node builtin modules. These modules are usually already in the module cache, so there may be no need to lazily load them.

  import * as path from 'path'; // transforms to plain `require` with interop
  import foo from 'bar'; // transforms to inline import

babel-plugin-transform-inline-imports-commonjs's Issues

Why?

The readme says:

This plugin should be used instead of babel-plugin-transform-es2015-modules-commonjs

Why? What is the difference between that transform and this one? What is the advantage?

If it really should be used in place of babel-plugin-transform-es2015-modules-commonjs for some reason, perhaps we could try to get it into babel/babel-preset-env, since that is using babel-plugin-transform-es2015-modules-commonjs currently.

Tree Shaking?

Nice Babel Plugin! Just wondering if Webpack treeshaking will still work after using the plugin since ES2015 module syntax is required for treeshaking.

Add support for deferring requires

`this` is not correct

import { lookup as lookupMime } from "mime"

lookupMime("foo.icns")

Generated code: (0, (_mime || _load_mime()).lookup)(fileName)

Error:

TypeError: Cannot read property 'icns' of undefined
    at Mime.lookup (/Users/develar/Documents/electron-builder/node_modules/mime/mime.js:72:20)
    at eval (eval at evaluate (unknown source), <anonymous>:1:36)
    at Mime.lookup (/Users/develar/Documents/electron-builder/node_modules/mime/mime.js:72:3)

Because this is not Mime but file.

Correct code must be: (_mime || _load_mime()).lookup(fileName)

Why path.replaceWith(t.sequenceExpression([t.numericLiteral(0), remap])); is required?

Only call memoizer function once per code path

Add option to use getter object style instead of memoizer function

See 85c8427

Doesn't work with Babel 7

I get the following error with Babel 7.

Error: Error: No substitution given for "$0". If this is not meant to be a
            placeholder you may want to consider passing one of the following options to @babel/template:
            - { placeholderPattern: false, placeholderWhitelist: new Set(['$0'])}
            - { placeholderPattern: /^$0$/ }
    at metadata.placeholders.forEach.placeholder (/Users/david/my-project/node_modules/@babel/template/lib/populate.js:27:15)
    at Array.forEach (native)
    at populatePlaceholders (/Users/david/my-project/node_modules/@babel/template/lib/populate.js:24:27)
    at arg (/Users/david/my-project/node_modules/@babel/template/lib/string.js:22:51)
    at err (/Users/david/my-project/node_modules/@babel/template/lib/builder.js:77:14)
    at addRequire (/Users/david/my-project/node_modules/babel-plugin-transform-inline-imports-commonjs/transform-inline-imports-commonjs.js:199:43)
    at PluginPass.exit (/Users/david/my-project/node_modules/babel-plugin-transform-inline-imports-commonjs/transform-inline-imports-commonjs.js:479:39)
    at newFn (/Users/david/my-project/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/Users/david/my-project/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/david/my-project/node_modules/@babel/traverse/lib/path/context.js:40:17)
    =============
    at module.exports.context (/Users/david/my-project/node_modules/babel-plugin-transform-inline-imports-commonjs/transform-inline-imports-commonjs.js:18:22)
    at e (/Users/david/my-project/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/Users/david/my-project/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPluginDescriptor (/Users/david/my-project/node_modules/@babel/core/lib/config/full.js:200:28)
    at config.plugins.reduce (/Users/david/my-project/node_modules/@babel/core/lib/config/full.js:69:20)
    at Array.reduce (native)
    at recurseDescriptors (/Users/david/my-project/node_modules/@babel/core/lib/config/full.js:67:38)
    at loadFullConfig (/Users/david/my-project/node_modules/@babel/core/lib/config/full.js:108:6)

I was hoping I could replace this plugin with @babel/plugin-transform-modules-commonjs plugin by using the option { "lazy": true }, but apparently it doesn't work as expected and doesn't fix the cyclic dependencies issues.

By the way, I tried to fix the issue by passing { placeholderPattern: false, placeholderWhitelist: new Set(['$0'])} to the template function as suggested but it didn't help.

Add option to exclude babel-runtime

Add option to exclude node builtins

Defer `export ... from ...`

Do not add memoizer function if identifier is not referenced at all