源码位置

https://github.com/galaxy-s10/webpack5-multi-page-template/blob/master/replaceLib.js

概况

参考了babel-plugin-import，实现了我认为核心的三个配置项：libraryName、libraryDirectory、style

测试

由于现代的组件库大多数都实现了原生的 ES modules 的 tree shaking，因此我们需要下载旧版的组件库才能测试出效果，这里我使用了 ant-design-vue 的 1.1.0 版本以及 antd 的 2.13.14 版本进行测试。

当遇到下面的代码时，会仅仅将 Button 和 Switch 进行打包：

import { Button, Switch } from 'ant-design-vue';
console.log(Button, Switch);

使用

将 replaceLib.js 放到和 babel.config.js 同级的目录里，然后在 babel.config.js 里添加：

plugins: [
  // ...
  [
    './replaceLib',
    // Options在 babel@7+ 中不能是数组，但是可以添加带名字的插件来支持多个依赖。
    { libraryName: 'ant-design-vue', libraryDirectory: 'lib', style: 'css' },
    'aaa', // 这个名字可以随便起
  ],
  [
    './replaceLib',
    { libraryName: 'antd', libraryDirectory: 'lib', style: 'css' },
    'bbb',
  ],
],

实现一个按需加载插件

源码位置

概况

测试

使用

引用