npm 包 babel-plugin-convert-import 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

babel-plugin-convert-import 是一个可以将某些依赖包的引用方式从 es6 的 import 语法转为 require 的 CommonJS 语法的 babel 插件。

在前端开发中，我们常常使用大量的第三方库和组件，这些库可能使用了不同的模块化规范，比如 CommonJS 和 ES6 Module。而我们在编写代码时，可能只使用了其中部分的功能，这时直接将整个库都打包进我们的项目显然是不明智的。因此，我们可以通过按需引入的方式来减少代码体积，并加快页面加载速度。

不过，使用 ES6 的 import 语法进行依赖加载，经过打包后还是会被转换成 CommonJS 规范。那为什么会有这种不必要的转换呢？对于少数没有按需引入的第三方库，它们可能暴露了一些需要全局加载的变量，这时候我们就需要通过将 ES6 的 import 语法转换为 CommonJS 的 require 语法来实现这些变量的全局加载。

这时，就可以使用 babel-plugin-convert-import 这个插件来实现这个需求。

安装

npm install babel-plugin-convert-import --save-dev

使用

在 .babelrc 文件中进行配置：

{
  "plugins": [
    ["convert-import", {
      "libraryName": "antd",
      "camel2UnderlineComponentName": false
    }]
  ]
}

配置说明：

libraryName：需要转换的库名。包名必填，即使在 import 时已经指定，也要在此填写。比如我们需要打包 antd，就需要填写 "antd"。
camel2UnderlineComponentName：是否将组件名称转换为下划线格式。默认会将组件名称从 Button 转换为 button。如果你不想进行此操作，就需要将其设置为 false。

示例

import { Button, Input } from 'antd';

通过上述的配置，babel-plugin-convert-import 会将这个 import 语句转换为以下 CommonJS 代码：

const Button = require('antd/lib/button');
const Input = require('antd/lib/input');
require('antd/lib/button/style');
require('antd/lib/input/style');

这样，就可以将 antd 打包进你的项目，同时只加载需要的代码片段，减小打包后代码的体积。

总结

通过使用 babel-plugin-convert-import，我们可以将 ES6 的 import 语法转换为 CommonJS 的 require 语法，来实现按需加载第三方库的需求。这可以有效地减小打包后代码的体积，提高页面加载速度。在实际开发中，我们可以根据项目需求，选择性地对需转换的库进行配置。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600560e781e8991b448df23f