babel-plugin-import-global

a babel plugin that suppport:

1. transfrom import vars to global vars
2. remove some import statements;
3. redirect some import statements;

installtion

1  npm install --save-dev babel-plugin-import-global
2  // or 
3  yarn add -D babel-plugin-import-global

config

1const camelCase =  require('camelcase');
2// babel.config.js
3module.exports = {
4  presets: [
5    ...
6  ],
7  plugins: [
8    [
9      'babel-plugin-import-global',
10      {
11        globals: {
12          antd: 'antd',
13          react: 'React',
14          'react-dom': 'ReactDOM'
15        },
16        removes: [
17          'antd.css'
18        ],
19        redirects: [
20          {
21            from: /^antd-plus\/npm\/components\/([^/]+)$/,
22            to: 'antd-plus',
23            imported: (src, matched) => camelCase(matched[1], { pascalCase: true })
24          }
25        ]
26      }
27    ],
28   ...
29  ]
30};

demo

1import React from "react";
2import ReactDOM from "react-dom";
3import { Search } from 'antd/npm/components/input';
4import Button from 'antd/npm/components/button';
5import Input from 'antd/npm/components/input';
6
7import 'antd.css';
8
9const Select = require('antd/npm/components/select')
10
11const { Option } = Select;
12
13function Test() {
14  return (
15    <>
16    <Select>
17      <Option>dd</Option>
18    </Select>
19    <Input />
20    <Search />
21    <Button>test</Button>
22    </>
23  )
24}
25
26
27function test1() {
28  ReactDOM.render(Test, document.getElementById('root'))
29}
30
31export {
32  test1
33}
34
35export default Test;
36

will transform to:

1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4  value: true
5});
6exports.test1 = test1;
7exports["default"] = void 0;
8
9var _antd = require("antd");
10
11var React = window.React;
12var ReactDOM = window.ReactDOM;
13
14var Search = require("antd").Input.Search;
15
16var Select = require("antd").Select;
17
18var Option = Select.Option;
19
20function Test() {
21  return (
22    /*#__PURE__*/
23    React.createElement(React.Fragment, null,
24    /*#__PURE__*/
25    React.createElement(Select, null,
26    /*#__PURE__*/
27    React.createElement(Option, null, "dd")),
28    /*#__PURE__*/
29    React.createElement(_antd.Input, null),
30    /*#__PURE__*/
31    React.createElement(Search, null),
32    /*#__PURE__*/
33    React.createElement(_antd.Button, null, "test"))
34  );
35}
36
37function test1() {
38  ReactDOM.render(Test, document.getElementById('root'));
39}
40
41var _default = Test;
42exports["default"] = _default;

options

• globals that will transform to global vars. demo:

1{
2  globals: {
3    antd: 'antd'
4  }
5}

or

1{
2  globals(src) {
3    const map = {
4      antd: 'antd'
5    };
6    return map[src];
7  }
8}

• removes that will be removed from code. demo:

1{
2  removes: [
3    'antd',
4    /some\.css$/,
5    function(src) {
6      return src === 'antd';
7    }
8  ]
9}

• redirects that will redirect the import source. demo:

1{
2  redirects: [
3    {
4      // string or Regexp
5      from: /^antd\/npm\/components\/([^/]+)$/,
6      // string or string.repalce`s function 
7      to: 'antd',
8      // custom imported handler, optional
9      imported: (src, matched) => camelCase(matched[1], { pascalCase: true })
10    }
11  ]
12}

• namespace that will transfrom to window.namespace.varName if provided.

• global default is window.

• varKind default is var.

• includes includes files RegExp list.

• excludes excludes files RegExp list.