Nodejs代码打包工具rollup的使用

Nodejs代码打包工具rollup的使用
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成更大、更复杂的代码库。它非常适合用于构建库和应用。下面是一些关于如何使用 Rollup 的基础指南。

安装 Rollup

首先，你需要安装 Node.js 和 npm。然后在你的项目中安装 Rollup 及其插件：

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs
  • @rollup/plugin-node-resolve：用来解析第三方模块。
  • @rollup/plugin-commonjs：允许 Rollup 将 CommonJS 模块转换为 ES6 模块。

配置文件

创建一个 rollup.config.js 文件来配置 Rollup：

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

export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife' // 输出格式，这里选择立即执行函数表达式（IIFE）
  },
  plugins: [
    resolve(), // 告诉 Rollup 如何查找外部模块
    commonjs() // 将 CommonJS 转换为 ES6
  ]
};

构建项目

使用以下命令来运行 Rollup：

npx rollup -c

这里的 -c 参数表示使用配置文件 rollup.config.js。

使用插件

Rollup 还有许多其他插件，例如 @rollup/plugin-babel 用于 Babel 转译，@rollup/plugin-terser 用于压缩输出等。你可以在需要时添加这些插件。

多个入口点

如果你有多个入口点，你可以通过配置多个 input 来处理：

export default [
  {
    input: 'src/main1.js',
    output: {
      file: 'dist/bundle1.js',
      format: 'es'
    }
  },
  {
    input: 'src/main2.js',
    output: {
      file: 'dist/bundle2.js',
      format: 'umd'
    }
  }
];

使用命令行

你也可以直接在命令行中指定参数来运行 Rollup：

npx rollup src/main.js -f iife -o dist/bundle.js

这里的 -f 参数指定了输出格式，-o 参数指定了输出文件的位置。

以上就是使用 Rollup 的基本步骤。根据你的具体需求，你可以调整配置和插件来满足不同的构建需求。


3 回复

Rollup 是一个非常强大的 JavaScript 模块打包器，特别适合用于库和应用的开发。要开始使用 Rollup，首先你需要安装它。打开终端，运行 npm install --save-dev rollup。

接下来，创建一个配置文件，比如 rollup.config.js，你可以这样写：

export default {
  input: 'src/index.js', // 你的入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife' // 立即执行函数格式，适合直接在浏览器中使用
  }
};

然后，你可以通过命令行运行 npx rollup -c 来打包你的项目。如果你希望在每次保存文件时自动重新打包，可以使用插件如 rollup-plugin-watch 或者 rollup-plugin-serve。

Rollup 还支持很多插件，比如 @rollup/plugin-node-resolve 可以让你从 node_modules 中导入模块，@rollup/plugin-commonjs 则能将 CommonJS 模块转换为 ES6 模块。试试这些吧，让代码打包变得轻松愉快！


Rollup 是一个非常强大的模块打包工具，主要用于现代 JavaScript 应用程序的编译和打包。它具有良好的性能和更小的输出体积，特别适合于库的开发。下面是使用 Rollup 的基本步骤。

1. 安装 Rollup 和相关插件

首先需要安装 rollup 和一些必要的插件，如 @rollup/plugin-node-resolve（用于解析 Node.js 模块）、@rollup/plugin-commonjs（用于将 CommonJS 模块转换为 ES6 模块）等。

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

2. 配置 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/bundle.js', // 输出文件
    format: 'iife' // 立即执行函数格式
  },
  plugins: [
    resolve(), // 告诉 Rollup 如何查找外部模块
    commonjs() // 将 CommonJS 转换为 ES6
  ]
};

3. 运行 Rollup

你可以通过 npm scripts 或直接在命令行中运行 Rollup：

npx rollup -c

这里的 -c 参数表示使用配置文件 rollup.config.js。

4. 高级配置

对于更复杂的项目，你可能还需要配置 Babel、TypeScript 或其他预处理器。例如，添加 @rollup/plugin-babel 来支持 ES6+ 语法的转换：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

修改 rollup.config.js 添加 Babel 插件：

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**' // 忽略 node_modules 目录
    })
  ]
};

这只是一个简单的入门指南。实际使用时，你可能需要根据项目的具体需求调整配置。

Rollup 是一个 JavaScript 模块打包器，可以将小模块文件编译成更大、更复杂的程序。以下是一个基本的使用步骤：

  1. 安装 Rollup 和插件：npm install --save-dev rollup
  2. 安装插件，例如 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs。
  3. 配置 rollup.config.js 文件：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [resolve(), commonjs()]
};
  1. 运行打包命令：npx rollup -c

以上是基础使用方法，你可以根据项目需求进行调整。

回到顶部