rollup打包vue2.x组件库JSX无法识别的踩坑记

2023-12-27 03:27:18

随着组件库开发的深入，我们不得不考虑一个绕不开的问题，那就是如何在构建组件库时，通过tree-shaking(摇树优化)最大程度地减小包的大小。因为在开发组件库时，我们往往会为了方便组件的开发和使用，引入很多在最终使用场景下并不需要用到的依赖。这些多余的依赖最终会让我们的组件库的包大小变得异常臃肿，给使用者带来不必要的负担。

前言

rollup目前已经成为构建组件库的主流工具，其优势显而易见：

打包速度快
按需构建
优化后的代码体积小

rollup的按需构建是通过tree-shaking机制实现的，tree-shaking会自动剔除代码中没有用到的代码块，从而减小最终打包后的代码体积。在rollup打包vue2.x组件库时，我们可能遇到过这样一个问题：使用jsx编写的组件在打包时无法被rollup识别，导致tree-shaking失效，最终打包后的代码体积过大。

问题分析

在rollup打包vue2.x组件库时，我们使用babel进行代码转换，babel会将jsx代码转换成js代码。但是，rollup在识别js代码时，可能会遇到一些问题。

rollup版本问题
rollup早期版本存在一个bug，无法识别将jsx代码转换成js代码后的import和export语句。这会导致rollup无法正确解析组件库中的依赖关系，从而导致tree-shaking失效。
插件配置问题
rollup需要使用插件来支持jsx语法。如果插件配置不当，也可能导致rollup无法识别jsx代码。

解决方案

针对上述问题，我们有以下解决方案：

更新rollup版本
将rollup更新到最新版本可以解决早期版本存在的bug。
正确配置插件
确保rollup中正确配置了jsx插件。具体配置方法如下：

import babel from '@rollup/plugin-babel';
...
plugins: [
  babel({
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: ['@babel/plugin-transform-react-jsx'],
  }),
  ...
],

通过以上两种方法，我们可以解决rollup打包vue2.x组件库时JSX无法识别的踩坑问题，从而保证tree-shaking能够正常工作，最终减小组件库的包大小。