babel-plugin-custom-import

continuation of umijs/babel-plugin-import, which no longer accept PRs

See below for new changes

Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, and so on.

Why babel-plugin-import?

• English Instruction
• 中文说明

Why babel-plugin-custom-import?

Besides on-demand import, babel-plugin-custom-import allows you to customize your library/npm package name when you import it.

This is particularly helpful when you work as a indie programmer or work for a small team, where you want to modify your package name as well as use that nice 'on-demand-import' feature in your own project while the original babel-plugin-import isn't compatible with.

A practical example could be shortening import source. Imagine due to team regulations you have to have a very wordy package name @team_prefix/blah-cli-name1-utils

you definitely don't want other engineer in your team to import things from that name. Using babel-plugin-custom-import could help you shorten that name

e.g.

import DefaultImport, {NamedImport} from 'name1-utils'

could be 'transpiled' to:

import DefaultImport, {NamedImport} from '@team_prefix/blah-cli-name1-utils'

How to do this? See changelog below

Where to add babel-plugin-custom-import

• babelrc
• babel-loader

Changelog

• new Configuration:

   {
     alias: 'xx', // an alias to represent LibraryName
     transferNameOn: true // if name of module export file is determined by module name, default is true
   }
  

  for example:

   {
     libraryName: '@module/mixed-inputs'
     alias: '@module/inputs', // an alias to represent LibraryName
   }
  

   import DefaultImport, {NamedImport} from '@module/inputs/exports'
  
   // will be transfered to ➡️
  
   import _DefaultImport from '@module/mixed-inputs/lib/exports'
   import {_NamedImport} from '@module/mixed-inputs/lib/exports'

Note

babel-plugin-import will not work properly if you add the library to the webpack config vendor.