babel-plugin-import 插件的使用

babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.

​ babel-plugin-import插件按需加载主要是配合ant-design UI 组件使用 ​ 过程如下:

1.安装插件

npm i babel-plugin-import --save-dev

2.配置方法

babel.config.js中配置plugins

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "ant-design-vue",//切记这里的库名要写正确
                "style": "css"//`style: true` 会加载 less 文件
            }
        ]
    ]
}

这样在main.js里使用

import { Button } from 'ant-design-vue';

babel-plugin-import插件就会帮你转换成 ant-design-vue/lib/xxx 的写法

​ 注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。

补充babel的转码工作大致分为三个阶段：

解析（parse）：将代码字符串解析成AST(抽象语法树)
转换（transform）：对抽象语法树进行转换操作
生成（generate）: 将变换后的抽象语法树再生成代码字符串

参考:

babel插件手册