babel插件

实现解析 import Button from 'antd'

如何写自定义babel plugin

在线代码解析ast

参考项目babel-plugin-import

在哪里使用

• babelrc
• babel-loader

例子

{ libraryName: "antd" }

import { Button } from "antd";

ReactDom.render(
  <div>
    <Button />
  </div>
);

      ↓ ↓ ↓ ↓ ↓ ↓

import _Button from "antd/lib/Button";
ReactDom.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, null)));

{libraryName: "antd", style: true }

import { Button } from "antd";

ReactDom.render(
  <div>
    <Button></Button>
  </div>
);

      ↓ ↓ ↓ ↓ ↓ ↓

import "antd/lib/Button/style";
import _Button from "antd/lib/Button";
ReactDom.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, null)));

{ libraryName: "antd", style: "css"}

import { Button } from "antd";

ReactDom.render(
  <div>
    <Button></Button>
  </div>
);

      ↓ ↓ ↓ ↓ ↓ ↓

import "antd/lib/Button/style/css";
import _Button from "antd/lib/Button";
ReactDom.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, null)));

{ libraryName: "antd", libraryDirectory: "es" }

import { Button } from "antd";

ReactDom.render(
  <div>
    <Button />
  </div>
);

      ↓ ↓ ↓ ↓ ↓ ↓

import _Button from "antd/es/Button";
ReactDom.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, null)));

{ libraryName: "antd", customNameCB: (name, file) => { if (fileName) return antd/custom-name/${name} }}

import { Button } from "antd";

ReactDom.render(
  <div>
    <Button />
  </div>
);

      ↓ ↓ ↓ ↓ ↓ ↓

import _Button from "antd/custom-name/Button";
ReactDom.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, null)));