Rollup 如何配置打包 react 项目

Rollup 如何配置打包 Vue 项目

要使用 Rollup 打包 Vue 项目，你需要安装一些插件并进行相应的配置。以下是一个基本的示例：

首先，安装必要的依赖：

npm install --save-dev rollup rollup-plugin-vue vue-template-compiler @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser

然后，创建一个名为 rollup.config.js 的 Rollup 配置文件：

import vue from 'rollup-plugin-vue'; // 处理 .vue 文件
import resolve from '@rollup/plugin-node-resolve'; // 解析 node_modules 中的模块
import commonjs from '@rollup/plugin-commonjs'; // 转换 CJS -> ESM, 通常配合 @rollup/plugin-node-resolve 插件使用
import { terser } from 'rollup-plugin-terser'; // 压缩打包的文件


export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife', // 输出格式，iife 表示立即执行函数
  },
  plugins: [
    resolve(),
    commonjs(),
    vue({ css:, compileTemplate: }), // 处理 .vue 文件
    terser() // 压缩代码
  ]
};

在这个配置文件中，我们使用了以下插件：

• rollup-plugin-vue：用于处理 .vue 文件。

• @rollup/plugin-node-resolve：用于解析 node_modules 中的模块。

• @rollup/plugin-commonjs：用于将 CommonJS 模块转换为 ES6 模块，这通常与 @rollup/plugin-node-resolve 插件一起使用。

• rollup-plugin-terser：用于压缩打包的文件。

最后，你可以运行 rollup -c 命令来打包你的 Vue 项目。

Rollup 如何配置打包 React 项目

要使用 Rollup 打包 React 项目，你需要安装一些插件并进行相应的配置。以下是一个基本的示例：

首先，安装必要的依赖：

npm install --save-dev rollup rollup-plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser

然后，创建一个名为 rollup.config.js 的 Rollup 配置文件：

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';


export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**', // 只编译我们的源代码
      presets: ['@babel/preset-react']
    }),
    terser()
  ]
};

在这个配置文件中，我们使用了以下插件：

• rollup-plugin-babel：用于将 ES6 代码转换为 ES5 代码，这样我们就可以使用最新的 JavaScript 特性来编写代码。我们还使用了 @babel/preset-react 预设来处理 JSX 代码。

• @rollup/plugin-node-resolve：用于解析 node_modules 中的模块。

• @rollup/plugin-commonjs：用于将 CommonJS 模块转换为 ES6 模块，这通常与 @rollup/plugin-node-resolve 插件一起使用。

• rollup-plugin-terser：用于压缩打包的文件。

最后，你可以运行 rollup -c 命令来打包你的 React 项目。