English | 简体中文

install

npm i -D import.macro
// or
yarn add -D import.macro

unsure you have install babel-plugin-macros

.babelrc

{
  plugins: ['babel-plugin-macros']
}

useage

import i from 'import.macro';
i('./a/b');
i('./a/b');

output：

import _aB from './a/b';
_aB;
_aB;

custom import

add a config file:

• .babel-plugin-macrosrc
• .babel-plugin-macrosrc.json
• .babel-plugin-macrosrc.yaml
• .babel-plugin-macrosrc.yml
• .babel-plugin-macrosrc.js
• babel-plugin-macros.config.js
• babelMacros in package.json

Configuration is as follows：

// .babel-plugin-macrosrc.js
module.exports = {
  importHelper: {
    // import i from 'import.macro'
    defaultImport: {
      transformSource: a => a
    },
    imports: [
      [
        'customImport',
        {
          prefix: '/path/to', // prefix source path
          isDefaultExport: true, // default is true
          transformSource: a => a // before add importDeclaration,transform sourcePath
        }
      ]
    ]
  }
};

then, you can import customImport from import.macro：

import { customImport } from 'import.macro';
customImport('filename');

output：

import Palette from '../a/b/filename';
filename;

there are also a default import，you can config it by importHelper.defaultImport.

when start with @, it will compiled to React component

import { customImport } from 'import.macro';
customImport('@SomeComponent');

会被编译为：

<SomeComponent />