揭秘如何利用 Rollup 打包 JS 工具，并发布至 NPM 包库

2023-10-26 04:54:30

前言

在当今快速发展的软件开发领域，模块化和代码复用是不可或缺的关键因素。JavaScript 作为一种强大的编程语言，拥有丰富的第三方库和工具，能够极大地提升开发效率。然而，随着项目规模的不断扩大，管理和组织这些代码片段也成为了一项挑战。

Rollup 应运而生，它是一款专为 JavaScript 代码打包而设计的工具。它能够将多个模块化的 JavaScript 文件合并成一个或多个优化后的文件，便于浏览器或其他 JavaScript 环境加载和执行。Rollup 不仅支持 ES Modules 语法，还能够将 CommonJS 和 AMD 等其他模块化格式的代码转换为 ES Modules。

除了代码打包，Rollup 还提供了强大的插件系统，允许开发者扩展 Rollup 的功能，例如代码压缩、转换和分析等。此外，Rollup 还可以与 Babel 等工具配合使用，将 ES6 等新语法转换为兼容旧浏览器的代码。

在本教程中，我们将逐步介绍如何使用 Rollup 打包 JavaScript 代码并将其发布为 NPM 包。我们将从配置 Rollup 开始，然后集成 Babel，编写发布脚本，并最终发布 NPM 包。

配置 Rollup

首先，我们需要安装 Rollup。您可以使用以下命令通过 NPM 安装：

npm install --save-dev rollup

安装完成后，在项目根目录创建一个名为 rollup.config.js 的文件，并添加以下内容：

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";

export default {
  input: "src/index.js",
  output: {
    file: "dist/index.js",
    format: "umd",
    name: "my-library",
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: "node_modules/**",
    }),
  ],
};

在这个配置文件中，我们指定了输入文件（src/index.js）、输出文件（dist/index.js）、输出格式（UMD）和库名称（my-library）。我们还使用了三个插件：rollup-plugin-node-resolve，用于解析模块；rollup-plugin-commonjs，用于转换 CommonJS 模块；rollup-plugin-babel，用于将 ES6 代码转换为兼容旧浏览器的代码。

集成 Babel

为了能够将 ES6 代码转换为兼容旧浏览器的代码，我们需要集成 Babel。您可以使用以下命令通过 NPM 安装：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

安装完成后，在项目根目录创建一个名为 .babelrc 的文件，并添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

在这个配置文件中，我们指定了 Babel 的预设为 @babel/preset-env。这个预设能够将 ES6 代码转换为兼容指定浏览器的代码。

编写发布脚本

现在，我们需要编写一个发布脚本，以便能够将我们的代码打包并发布到 NPM。在项目根目录创建一个名为 package.json 的文件，并添加以下内容：

{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "rollup -c rollup.config.js",
    "publish": "npm publish"
  }
}