Taming the Imports

SHARE ON

Introducing explicit imports without needless confusion

Performance is critical to every web application, and something we care deeply about at Mixmax.
That’s why we invest in performance best-practices, such as limiting the size of the Javascript that
we serve for our application. We use a tool called rollup.js, which performs
code
tree-shaking
at build-time. Tree-shaking, in contrast to dead code removal, uses explicit imports to only include
what you use in the resulting code bundle.

When we adopted Rollup, we were happily forced to adopt ES6
imports
. However,
referencing specific modules threatened to become a relative-pathing nightmare. Our codebase lives
in a directory structure which includes subdirectories for things like views and models, and has
grown pretty deep, so we have to use paths like:

import UserModel from '../../../../../../../models/user';

However, some tools like Babel have
plugins that support an absolute-style
import, where the absolute path refers to the root of the project. This would reduce our relative
import, above, into simply:

import UserModel from '/models/user';

We couldn’t just use Babel’s plugin, because rollup.js needs to resolve the modules and shake the
tree before Babel runs, so we wrote our own
plugin
for rollup that supports importing
from the root of the project. Cheers!

README

Add the ability to import modules by the root path, like babel-root-slash-import.

// import a module relative to a specified root directory
import UserModel from '/models/user';

// illustrative - if we were in /views/user, we can reference a model's module
// using an absolute path from the root of the project, rather than relative to
// the current module
class UserView {
  // ...
}

Install

$ npm install --save-dev rollup-plugin-root-import

Usage

import {rollup} from 'rollup';
import rootImport from 'rollup-plugin-root-import';

rollup({
  entry: 'client/src/main.js',
  plugins: [
    rootImport({
      // Will first look in client/src/* and then common/src/*
      root: 'common/src',
      useEntry: 'prepend',

      // If we don't find the file verbatim, try adding these extensions
      extensions: '.js'
    })
  ]
});

API

rootImport([options])

Creates a rollup plugin to resolve absolute-pathed imports relative to the project’s entry or
specified root directory/ies.

Options:

  • root an optional string or ordered array of strings, which represent the roots from which to try
    and resolve imports.
  • useEntry if provided, should be either 'prepend' or 'append', where each signify that the
    directory containing the entry should be prepended or appended to the array of roots,
    respectively. By default, if root is provided and useEntry is not provided, the directory of
    the entry module will not be used to resolve absolute-pathed imports.
  • extensions, if provided, specifies a string or ordered array of strings, each of which
    represents an extension to append to the resolved file if the import isn’t found verbatim.

SHARE ON

Written By

Eli Skeggs

Eli Skeggs

From Your Friends At