rollup 打包自己的 js 库

前端

2024-01-28 14:46:45

前言

随着前端工程的日益复杂，代码模块化已经成为一种必不可少的开发模式。通过将代码拆分成更小的模块，我们可以提高代码的可维护性和复用性。然而，模块化也带来了一个问题：如何将这些模块打包成一个可供浏览器或其他环境使用的单个文件？

这里就需要用到打包工具了。市面上有很多打包工具可供选择，比如 webpack、parcel、rollup 等。每种工具都有自己的特点和优缺点。本文将介绍如何使用 rollup 来打包自己的 js 库。

什么是 rollup

rollup 是一个利用 es6 原生的模块机制进行打包构建的工具。它更着眼于未来，对 commonjs 模块机制不提供内置的支持。rollup 的核心思想是将代码中的所有依赖关系梳理成一个有向无环图（DAG），然后根据这个图进行打包。

与 webpack 相比，rollup 的一个显著特点是它的按需加载。在 webpack 中，所有模块都被打包到一个文件中，而在 rollup 中，只有在需要的时候才会加载模块。这使得 rollup 的打包速度更快，也更适合构建库。

安装 rollup

要安装 rollup，可以使用 npm 命令：

npm install rollup -g

安装完成后，就可以使用 rollup 命令来打包代码了。

打包自己的 js 库

下面我们来一步步地打包自己的 js 库。

创建一个新的项目目录，并创建一个 package.json 文件。在 package.json 文件中，添加以下内容：

{
  "name": "my-lib",
  "version": "1.0.0",
  "main": "index.js"
}

创建一个 index.js 文件，这是我们的库的主入口文件。

// index.js
function sum(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

export {
  sum,
  sub
}

创建一个 rollup.config.js 文件，这是 rollup 的配置文件。

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

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};