纯Js和模板库，打包一网打尽：Vite和Rollup强强联手

前言

Vite是一款备受前端开发者喜爱的现代前端构建工具，凭借其卓越的开发体验和闪电般的构建速度，迅速俘获人心。然而，Vite默认使用esbuild作为打包工具，对于一些复杂的JavaScript库或带模板的库，esbuild可能力不从心。此时，我们便可引入Rollup，一款功能强大的打包工具，与Vite强强联手，解决这些棘手的问题。

为什么要使用Rollup打包Vite项目？

• 更强大的打包能力： Rollup拥有更强大的打包能力，可以轻松处理复杂的JavaScript库或带模板的库，例如包含TypeScript、JSX或Vue模板的库。
• 更好的代码分割： Rollup可以实现更细粒度的代码分割，这有助于提高应用程序的性能和加载速度。
• 更灵活的配置： Rollup提供更灵活的配置选项，允许你对打包过程进行更精细的控制。

如何使用Rollup打包Vite项目？

1. 安装Rollup

npm install -D rollup

2. 创建Rollup配置文件

在项目根目录下创建rollup.config.js文件，并添加以下内容：

import vue from '@vitejs/plugin-vue';
import rollupPluginVue from 'rollup-plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'umd',
  },
  plugins: [
    vue(),
    rollupPluginVue(),
  ],
};

3. 在package.json中添加Rollup脚本

{
  "scripts": {
    "build": "rollup -c rollup.config.js"
  }
}

4. 运行Rollup打包

npm run build

打包纯JavaScript库

如果你的库是纯JavaScript的，你可以使用以下配置：

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'umd',
  },
  plugins: [
    terser(),
  ],
};

打包带模板的库

如果你的库包含模板，例如Vue模板，你需要使用以下配置：

import { terser } from 'rollup-plugin-terser';
import vue from '@vitejs/plugin-vue';
import rollupPluginVue from 'rollup-plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'umd',
  },
  plugins: [
    vue(),
    rollupPluginVue(),
    terser(),
  ],
};

结论

通过使用Rollup打包Vite项目，你可以轻松构建可复用组件和高效应用程序。Rollup强大的打包能力和灵活的配置选项，可以满足各种复杂项目的需要。无论是纯JavaScript库还是带模板的库，Rollup都能轻松搞定。赶快尝试一下吧，你会发现Rollup和Vite的组合是如此强大。