手把手教你Rollup构建

介绍

Rollup 是一个 JavaScript 模块打包工具，它专注于 ES6 模块化的支持，并且被设计成更适用于构建库或组件而不是完整的应用程序。与其他打包工具如 Webpack 相比，Rollup 具有更高的效率和更小的输出体积，因为它采用了一些优化策略，例如 Tree Shaking。

以下是 Rollup 的一些主要特点和优势：

ES6 模块支持：Rollup 最初设计的目的就是支持 ES6 模块的打包。它可以处理 ES6 模块的导入和导出语法，以及相关的模块化特性。
Tree Shaking：Rollup 使用静态分析的技术来识别和删除未使用的代码（即无法到达的代码），这被称为 Tree Shaking。这可以帮助减少打包后的文件体积，提高加载性能。
插件系统：Rollup 提供了一个灵活的插件系统，允许开发者通过插件来扩展 Rollup 的功能。这意味着你可以通过插件来处理各种任务，例如编译 TypeScript、转译代码、压缩文件等。
纯 JavaScript：与 Webpack 不同，Rollup 是用纯 JavaScript 编写的，这意味着你可以更容易地理解和扩展它的源代码。
快速构建速度：由于 Rollup 专注于 ES6 模块，并且采用了一些优化策略，因此通常具有更快的构建速度和更小的输出体积。
适用于库的打包：由于 Rollup 的设计目标是为了支持库和组件的打包，因此它更适用于打包独立的功能模块而不是整个应用程序。

尽管 Rollup 在某些方面具有独特的优势，但它也有一些局限性，例如对动态导入（Dynamic Imports）的支持较弱，以及对一些非标准模块格式的支持较差。因此，在选择打包工具时，你需要根据项目的需求和特点来权衡各种因素。

安装

sh 复制代码

npm install --global rollup
# 或者
# npm install --save-dev rollup

在项目根目录新建文件rollup.config.mjs(或rollup.config.js)，pacakge.json的script中添加rollup -c

json 复制代码

// pacakge.json
{
  "scripts": {
    "build": "rollup -c"
  }
}

终端运行npm run build，也可以直接在终端运行npx rollup -c

超级简单的配置

js 复制代码

// rollup.config.mjs
export default {
	input: 'src/main.js',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	}
};

也可以同时构建多种format

js 复制代码

// rollup.config.mjs
export default [
  {
    input: 'src/main.js',
    output: {
      file: 'bundle.js',
      format: 'cjs'
    }
  },{
    input: 'src/main.js',
    output: {
      file: 'bundle.es.js',
      format: 'es'
    }
  }
];

ts项目

安装相关依赖

sh 复制代码

npm install rollup-plugin-typescript2 typescript tslib --save-dev

更新rollup.config.mjs

js 复制代码

// rollup.config.mjs
import typescript from 'rollup-plugin-typescript2';
export default {
	input: './main.ts',
	plugins: [
		typescript(/*{ plugin options }*/)
	]
}

第三方依赖

真实项目，往往会用到第三方依赖，可以通过插件来解决依赖引入的问题

安装相关依赖

sh 复制代码

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

更新配置文件

js 复制代码

// rollup.config.mjs
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
	input: './main.ts',
	plugins: [
    resolve({
      // browser: true, // 指定使用browser模块
    }),
    commonjs(), // 将CommonJS模块转换成ES6
		typescript({ 
      // tsconfig: path.resolve(__dirname, 'tsconfig.lib.json'), // 指定tsconfig文件
      compilerOptions: {
        lib: ["es5", "es6", "dom"], 
        target: "es5"
      }
    })
	]
}

可能遇到的问题

Missing shims for Node.js built-ins
Missing global variable names

如果确定是浏览器环境，@rollup/plugin-node-resolve插件指定参数{ browser: true }

第三方依赖没有编译

默认情况下，对于第三方依赖，rollup-plugin-typescript2不会对其进行编译，导致最终的产物的语法不一致，可以引入@rollup/plugin-babel来针对性的进行编译

sh 复制代码

npm install --save-dev @rollup/plugin-babel

js 复制代码

// rollup.config.mjs
import { babel } from '@rollup/plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
	input: './main.ts',
	plugins: [
    resolve({
      // browser: true, // 指定使用browser模块
    }),
    commonjs(), // 将CommonJS模块转换成ES6
		typescript({ 
      // tsconfig: path.resolve(__dirname, 'tsconfig.lib.json'), // 指定tsconfig文件
      compilerOptions: {
        lib: ["es5", "es6", "dom"], 
        target: "es5"
      }
    }),
    babel({ 
      babelHelpers: 'bundled'
    }),
	]
}

拓展Rollup构建：vue项目

安装相关依赖

sh 复制代码

npm install --save-dev @vitejs/plugin-vue @vitejs/plugin-vue-jsx unplugin-vue-macros rollup-plugin-import-css

更新配置文件

js 复制代码

// rollup.config.mjs
import { babel } from '@rollup/plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import VueMacros from 'unplugin-vue-macros/rollup'; 
import css from "rollup-plugin-import-css"; // 处理css文件
export default {
	input: './src/main.ts',
	plugins: [
    VueMacros({
      setupComponent: false,
      setupSFC: false,
      plugins: {
        vue: vue({
          isProduction: true,
        }),
        vueJsx: vueJsx(),
      },
    }),
    resolve({
      extensions: ['.mjs', '.js', '.json', '.ts'],
      browser: true, // 指定使用browser模块
    }),
    commonjs(), // 将CommonJS模块转换成ES6
    css({
      output: 'style.css'
    }),
		typescript(),
    babel({ 
      babelHelpers: 'bundled'
    }),
	],
  output: {
		file: 'dist/bundle.js',
		format: 'cjs'
	}
}