@babel/helper-module-imports

What is @babel/helper-module-imports?

The @babel/helper-module-imports package is a utility that allows Babel plugins to add module imports to a file in a consistent way. It provides functions to programmatically add import statements or require calls within the code being transformed by Babel.

What are @babel/helper-module-imports's main functionalities?

addDefault

Adds a default import statement to the file. For example, it can add `import lodash from 'lodash';` to the code.

import { addDefault } from '@babel/helper-module-imports';
const path = /* ... */;
const imported = addDefault(path, 'lodash', { nameHint: 'lodash' });

addNamed

Adds a named import statement to the file. For example, it can add `import { map } from 'lodash';` to the code.

import { addNamed } from '@babel/helper-module-imports';
const path = /* ... */;
const imported = addNamed(path, 'map', 'lodash', { nameHint: 'map' });

addNamespace

Adds a namespace import statement to the file. For example, it can add `import * as lodash from 'lodash';` to the code.

import { addNamespace } from '@babel/helper-module-imports';
const path = /* ... */;
const imported = addNamespace(path, 'lodash', { nameHint: 'lodash' });

addSideEffect

Adds an import statement that will include a module for its side effects only, without importing any bindings. For example, it can add `import 'normalize.css';` to the code.

import { addSideEffect } from '@babel/helper-module-imports';
const path = /* ... */;
addSideEffect(path, 'normalize.css');

Other packages similar to @babel/helper-module-imports

babel-plugin-import

A Babel plugin that allows you to import components from libraries in a modular way, often used with UI libraries like Ant Design. It can transform named imports to individual path imports to reduce bundle size, which is a different approach compared to @babel/helper-module-imports that focuses on adding imports programmatically within Babel plugins.

babel-plugin-module-resolver

A Babel plugin that allows you to add aliases for imports in your project, making it easier to manage paths. It can be used to rewrite the paths of imports and requires, which is different from @babel/helper-module-imports that is used to add new imports rather than modify existing ones.

babel-plugin-transform-imports

This plugin transforms member style imports (e.g., `import { map } from 'lodash'`) into default import style imports (e.g., `import map from 'lodash/map'`). This can help with reducing bundle sizes by only including the parts of a module that are used. It serves a different purpose than @babel/helper-module-imports, which is more about adding imports rather than optimizing them.

README

@babel/helper-module-imports

Installation

npm install @babel/helper-module-imports --save

Usage

import "source"

import { addSideEffect } from "@babel/helper-module-imports";
addSideEffect(path, 'source');

import { named } from "source"

import { addNamed } from "@babel/helper-module-imports";
addNamed(path, 'named', 'source');

import { named as _hintedName } from "source"

import { addNamed } from "@babel/helper-module-imports";
addNamed(path, 'named', 'source', { nameHint: "hintedName" });

import _default from "source"

import { addDefault } from "@babel/helper-module-imports";
addDefault(path, 'source');

import hintedName from "source"

import { addDefault } from "@babel/helper-module-imports";
addDefault(path, 'source', { nameHint: "hintedName" })

import * as _namespace from "source"

import { addNamespace } from "@babel/helper-module-imports";
addNamespace(path, 'source');

Examples

Adding a named import

import { addNamed } from "@babel/helper-module-imports";

export default function({ types: t }) {
  return {
    visitor: {
      ReferencedIdentifier(path) {
        let importName = this.importName;
        if (importName) {
          importName = t.cloneDeep(importName);
        } else {
          // require('bluebird').coroutine
          importName = this.importName = addNamed(path, 'coroutine', 'bluebird');
        }

        path.replaceWith(importName);
      }
    },
  };
}