往期精彩文章推荐
🔥🔥🔥微前端无界(wujie)源码浅析——子应用加载与js、css沙箱实现
🏠🏠🏠微前端我劝你千万别无脑冲qiankun
一个js库就把你的网页的底裤🩲都扒了——import-html-entry
🧶创建js沙箱都有哪些方式
两分钟快速了解css样式隔离方案有哪几种
这一次再也不怕webpack面试了【webpack配置、处理资源】
🏝️🏝️🏝️一个babel插件让项目中所有antd table实现拖拽控制列宽
Antd Table默认是不支持列宽度可以调整的，虽然官网有例子通过react-resizable实现列拖宽度。可以自己封装一个可以拖宽的组件，然后使用自己封装的。
但是有两个问题：
- 之前的老项目所有table都不能拖宽，没有用自己封装后组件，怎么办？
- 每次新开项目，都需要把自己封装组件的复制进项目中，增加工作量，不够优雅
半夜睡觉之前，突发奇想，能不能写一个babel插件解决上述问题，起床开干。
babel-plugin-transform-antd-resize-table插件应运而生。
github 地址：github.com/duchao-duch… 留个star再走呗
使用方式
以create-react-app脚手架创建的项目为例，
npx create-react-app my-demo-app
cd my-demo-app
npm run start
创建完成工程之后
npm i babel-plugin-transform-antd-resize-table
需要修改webpack配置网上有很多修改create-react-app的方式，我这里直接暴力解开webpack配置
npm run eject
打开后然后在webpack.cnofig.js中配置插件
其中optionName是你自己写的封装好的可以拖拽的antd table的路径地址，需要绝对路径。上面是引入项目中的封装好的组件的配置。
如果你自己封装好并且发布了npm包，在项目上安装好该包的前提下，可以配置如下：
[require.resolve('babel-plugin-transform-antd-resize-table'), { optionName: '自己定义的包名字' }]
重新npm run start就行，项目上所有的antd table就可以实现列拖拽修改宽度了！
使用效果
可以发现antd的table也可以拖宽列了！！！
实现原理
其实很简单，webpack打包的时候，进行替换引入就行，将引入antd的table修改为我们自己封装好的table就行。 替换之前
import { Table，Card } from 'antd';
import SelfTable from './components/table';
babel插件处理之后
import { Card } from 'antd'; // 这里会删除Table
import SelfTable from './components/table';
import Table from './components/table'; // 插入我们自己的table
---------------------------------------------------------------------------------
// 如果配置是
[require.resolve('babel-plugin-transform-antd-resize-table'), { optionName: 'custom-package-name' }]
// 替换后
import { Card } from 'antd'; // 这里会删除Table
import SelfTable from './components/table';
import Table from 'custom-package-name'; // 插入我们自己的table
