Rollup 的基本用法以及如何使用 Rollup 实现 tree shaking 功能

2023-09-07 11:06:45

Rollup 是一个非常强大的 JavaScript 模块打包工具，可以帮助你轻松地将你的 JavaScript 代码打包成一个可供浏览器或其他环境使用的文件。它比 Webpack 更加轻量级，并且配置也更加简单。

Rollup 的基本用法

Rollup 的基本用法如下：

安装 Rollup

npm install -g rollup

创建一个配置文件

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

运行 Rollup

rollup -c

查看打包结果

dist/index.js

如何使用 Rollup 实现 tree shaking

Tree shaking 是一种可以帮助你减少代码包体积的技术，可以让你只打包你需要的代码，而不需要打包所有代码。要使用 Rollup 实现 tree shaking，你需要在你的代码中使用 ES2015 模块语法。

// src/index.js
import { foo } from './foo';

console.log(foo);

// src/foo.js
export const foo = 'Hello, world!';

在你的 Rollup 配置文件中，你需要使用 treeshake 插件。

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};