babel-plugin-rewrite-module-path

babel-plugin-rewrite-module-path

Rewrite module resolving path

case 1: Rewrite a specific module subpath to node_modules

- import foo from "@monorepo/shared/modules/foo"
+ import foo from "@monorepo/shared/node_modules/foo"

via

// .babelrc.json
{
  "plugins": ["babel-plugin-rewrite-module-path", {
      "rewriteMapper": {
          "^@monorepo/shared/modules/": "@monorepo/shared/node_modules/"
      }
  }]
}

case 2: Rewrite a cjs importing to esm importing

- import inversify from "inversify/lib/inversify"
+ import inversify from "inversify/es/inversify"

via

// .babelrc.json
{
  "plugins": ["babel-plugin-rewrite-module-path", {
      "rewriteMapper": {
          "^inversify/lib/": "inversify/es/"
      }
  }]
}

case 3: Rewrite a lodash importing to lodash fp importing(for typescript user don't forget to config the paths compiler options of tsconfig.json to adjust intelligence)

- import flatMap from "lodash/flatMap"
+ import flatMap from "lodash/fp/flatMap"

via

// .babelrc.json
{
  "plugins": ["babel-plugin-rewrite-module-path", {
      "rewriteMapper": {
          "^lodash/": "lodash/fp/"
      }
  }]
}

---

Scenes

• Take the advantage of rewriting to shorten the importing path. / Config the importing path to a preferred/reader-friendly one.

• Rewrite module subpath for hacking the resolving mechanism. e.g. in some bundling situation.

• It could be an alternative approach to declaring exports filed to tell the node modules resolver how to resolve a node_modules package.

  // package.json
  {
      "exports": {
          "modules/*": "./node_modules/*"
      }
  }
  

  For Javascript user, you could use a custom folder name as replacement to node_modules, it's common for implementing a monorepo project. e.g.

  // '../../modules/..' will be rewritten to '../../node_modules/..'
  import singletonModule from '@monorepo/shared/modules/inversify'
  

  For Typescript user, you need additional works to support intelligence through module path rewriting, see typescript paths for more details. e.g.

  // tsconfig.json
  {
      "compilerOptions": {
          "baseUrl": ".",
              "paths": {
                  // we already have type-safe node_modules aliasing, still need a runtime rewriting for development and production building.
                  "@monorepo/shared/modules/*": ["./packages/shared/node_modules/*", "./packages/shared/node_modules/@types/*"]
              }
      }
  }
  

---

Glance at the rewritable statements

Supports these module importing usages:

• Import Declaration
• Export All Declaration
• Export Named Declaration
• Dynamic Importing
• require
• require.context
• import.meta.glob
• import.meta.globEager.

rewrite

import foo from '@monorepo/shared/modules/foo'

import * as foo from '@monorepo/shared/modules/foo'

import '@monorepo/shared/modules/foo'

export * from '@monorepo/shared/modules/foo'

export { bar } from '@monorepo/shared/modules/foo'

export { default as foo } from '@monorepo/shared/modules/foo'

const foo = await import('@monorepo/shared/modules/foo')

const { bar } = await import('@monorepo/shared/modules/foo')

import('@monorepo/shared/modules/foo')

const foo = require('@monorepo/shared/modules/foo')

const foo = import.meta.glob('@monorepo/shared/modules/foo')

const foo = import.meta.globEager('@monorepo/shared/modules/foo')

const foo = require.context('@monorepo/shared/modules/foo')

to

import foo from '@monorepo/shared/node_modules/foo'

import * as foo from '@monorepo/shared/node_modules/foo'

import '@monorepo/shared/node_modules/foo'

export * from '@monorepo/shared/node_modules/foo'

export { bar } from '@monorepo/shared/node_modules/foo'

export { default as foo } from '@monorepo/shared/node_modules/foo'

const foo = await import('@monorepo/shared/node_modules/foo')

const { bar } = await import('@monorepo/shared/node_modules/foo')

import('@monorepo/shared/node_modules/foo')

const foo = require('@monorepo/shared/node_modules/foo')

const foo = import.meta.glob('@monorepo/shared/node_modules/foo')

const foo = import.meta.globEager('@monorepo/shared/node_modules/foo')

const foo = require.context('@monorepo/shared/node_modules/foo')

Usage

• install:

npm install babel-plugin-rewrite-module-path

• config via babelrc:

// .babelrc.json
{
  "plugins": ["babel-plugin-rewrite-module-path", {
      "rewriteMapper": {
          "/modules/", "/node_modules/"
      }
  }]
}

Full Option

The plugin options signatures:

export type RewriteModulePathOptions = {
    rewriteMapper: Record<string, string>,
    transform?: {
        importDeclaration?: boolean,
        exportDeclaration?: boolean,
        dynamicImport?: boolean,
        importGlob?: boolean,
        importGlobEager?: boolean,
        require?: boolean,
        requireContext?: boolean,
    }
}

The default options:

export const defaultRewriteModulePathOptions = {
    transform: {
        importDeclaration: true,
        exportDeclaration: true,
        dynamicImport: true,
        importGlob: true,
        importGlobEager: true,
        require: true,
        requireContext: true,
    }
}

References

• Nodejs Package Entry Points
• tsconfig#compilerOptions#paths