AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

深入了解rollup（二）常用配置

2024-01-03 166
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
全局流量管理 GTM，标准版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
云解析 DNS，旗舰版 1个月
简介： Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的常用配置的使用方法。

引言

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的常用配置的使用方法。


常用的基本配置

下面是一些常用的Rollup配置及示例说明：

1. input：指定要打包的入口文件路径。可以是单个文件路径或一个包含多个入口文件的对象。

exportdefault {
input: 'src/main.js',
// 或者input: {
main: 'src/main.js',
app: 'src/app.js'  },
// ...}

2. output：指定打包后的输出文件路径及格式。可以是单个输出配置对象或一个包含多个输出配置对象的数组。

exportdefault {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd',
name: 'MyLibrary'  },
// 或者output: [
    {
file: 'dist/bundle1.js',
format: 'umd',
name: 'MyLibrary1'    },
    {
file: 'dist/bundle2.js',
format: 'esm'    }
  ],
// ...}

3. plugins：使用插件可以扩展Rollup的功能。可以是单个插件实例或一个包含多个插件实例的数组。

import { terser } from'rollup-plugin-terser';
importresolvefrom'@rollup/plugin-node-resolve';
exportdefault {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd'  },
plugins: [
terser(), // 压缩代码resolve() // 解析第三方模块  ],
}

4. external：指定不需要打包的外部依赖库。可以是一个字符串、一个正则表达式、一个函数或一个包含多个匹配规则的数组。

exportdefault {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd'  },
external: ['lodash'], // 不打包lodash库// 或者external: id=>/^lodash/.test(id), // 不打包以lodash开头的模块// ...}

5. treeshake：指定是否开启摇树优化，即只打包使用到的代码。默认为true。

exportdefault {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd'  },
treeshake: true, // 开启摇树优化// ...}

6. watch：指定是否开启监听模式，即文件变动时自动重新打包。默认为false。

exportdefault {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd'  },
watch: true, // 开启监听模式// ...}

7. 模块解析（resolve）：指定模块的解析方式，例如别名、扩展名等。

exportdefault {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd',
  },
resolve: {
alias: {
'@': './src', // 别名配置    },
extensions: ['.js', '.jsx'], // 扩展名配置  },
// ...}

多产物配置

可以通过配置多个输出对象来实现。每个输出对象都可以指定不同的输出文件路径、格式和其他属性。

我们可以将 output 改造成一个数组，对外暴露出不同格式的产物供他人使用，不仅包括 ESM，也需要包括诸如CommonJS、UMD等格式。

import { defineConfig } from'rollup'exportdefaultdefineConfig({
input: 'src/index.js',
output: [
    {
file: 'dist/bundle-iife.js',
format: 'iife'    },
    {
file: 'dist/bundle-esm.js',
format: 'esm'    },
    {
file: 'dist/bundle-cjs.js',
format: 'cjs'    },
    {
file: 'dist/bundle-umd.js',
format: 'umd',
name: 'bundle'    }
  ],
})

通过这种方式，可以根据需要生成不同格式的产物，以满足不同环境或使用场景的需求。

需要注意的是，每个输出对象可以有自己独立的属性配置，例如name、sourcemap等。可以根据具体需求在每个输出对象中进行相应配置。

多入口配置

以下是rollup的多入口示例，包括多入口一个产物，多入口多个产物，每个入口对应一种构建方式的情况示例：

  1. 多入口一个产物：
// rollup.config.jsexportdefault {
input: {
main: 'src/main.js',
admin: 'src/admin.js'  },
output: {
file: 'dist/bundle.js',
format: 'iife'  }
}

上述配置中，input指定了两个入口文件main.js和admin.js，output指定了生成的产物文件为bundle.js。

  1. 多入口多个产物：
// rollup.config.jsexportdefault [
  {
input: 'src/main.js',
output: {
file: 'dist/main-bundle.js',
format: 'iife'    }
  },
  {
input: 'src/admin.js',
output: {
file: 'dist/admin-bundle.js',
format: 'iife'    }
  }
]

上述配置中，通过数组形式指定了两个配置对象，每个配置对象分别对应一个入口文件和一个输出文件。

  1. 每个入口对应一种构建方式：
// rollup.config.jsexportdefault [
  {
input: 'src/main.js',
output: {
file: 'dist/main-bundle.cjs.js',
format: 'cjs'    }
  },
  {
input: 'src/admin.js',
output: {
file: 'dist/admin-bundle.esm.js',
format: 'esm'    }
  }
]

上述配置中，通过指定不同的format属性，可以分别生成CommonJS和ES模块的产物文件。

以上是rollup的多入口示例，可以根据实际需求进行配置。

动态导入与默认代码分割

以下是rollup的动态导入与默认代码分割的示例：

  1. 动态导入示例：
// main.jsimport('./module.js').then(module=> {
module.default();
});

上述代码中，使用动态导入的方式引入了module.js模块，并在then回调中调用了模块的默认导出函数。

  1. 默认代码分割示例：
// rollup.config.jsexportdefault {
input: 'src/main.js',
output: {
dir: 'dist',
format: 'esm',
chunkFileNames: '[name]-[hash].js'  },
plugins: [
// 插件配置  ]
}

上述配置中，通过设置output.dir属性指定输出目录，设置output.chunkFileNames属性为 [name]-[hash].js，这样每个代码分割出来的模块都会生成一个独立的文件。

  1. 动态导入与默认代码分割结合示例：
// main.jsimport('./module.js').then(module=> {
module.default();
});
// module.jsexportdefaultfunction() {
console.log('Hello from module');
}
// rollup.config.jsexportdefault {
input: 'src/main.js',
output: {
dir: 'dist',
format: 'esm',
chunkFileNames: '[name]-[hash].js'  },
plugins: [
// 插件配置  ]
}

上述示例中，通过动态导入方式引入了module.js模块，并在then回调中调用了模块的默认导出函数。同时，配置了默认的代码分割，将module.js模块分割为一个独立的文件。

打包后的文件结构

插件使用

比如我们现在引入lodash-es库

npm install lodash-es -D

在index.js中使用

import { chunk } from"lodash-es";
constresult=chunk([1, 2, 3, 4], 2);
console.log({ result })

现在直接打包

exportdefault {
input: 'src/index.js',
output: {
dir: 'dist/esm/',
format: 'esm',
  }
}

会出现下面的警告：

点击链接看了下，大致意思就是不能解析lodash-es这个依赖，报出了警告，问是不是需要加上external，也就是把lodash-es这个库给排除出去。

默认情况下，Rollup 只解析相对模块。这意味着像这样的 import 语句

import { chunk } from'lodash-es'

不会导致 lodash-es 被打包到你的包中——相反，它将是运行时需要的外部依赖项。如果这就是你想要的，你可以用 external 选项消除这个警告。

exportdefault {
input: 'src/index.js',
output: {
dir: 'dist/esm/',
format: 'esm',
  },
external: ['lodash-es'], // 消除警告}

再次打包就没问题了。

如果你确实想在打包后的代码中包含这个模块，需要告诉 Rollup 如何找到它。大多数情况下，你可以使用 @rollup/plugin-node-resolve

安装:

npm install @rollup/plugin-node-resolve -D

使用：

import { nodeResolve } from'@rollup/plugin-node-resolve';
exportdefault {
input: 'src/index.js',
output: {
dir: 'dist/esm/',
format: 'esm',
  },
plugins: [nodeResolve()]
// external: ['lodash-es'], // 消除警告}

现在，再次进行打包，无论是打包时间，还是打包内容和之前都很不一样了，把lodash-es中，关于chunk()函数的内容，都打包进了index.js文件中

对于动态加载模块，rollup帮我们自动做了代码分割，其实我们也可以手动的操作，直接在rollup配置中声明

import { nodeResolve } from'@rollup/plugin-node-resolve';
exportdefault {
input: 'src/index.js',
output: {
dir: 'dist/esm/',
format: 'esm',
entryFileNames: '[name].[hash].js',
chunkFileNames: 'chunk-[name].[hash].js',
manualChunks: {
'lodash-es': ['lodash-es']
    }
  },
plugins: [nodeResolve()]
// external: ['lodash-es'], // 消除警告}

总结

总的来说，它是一个强大而灵活的工具，适用于各种规模和类型的JavaScript项目。在本文中介绍了一些常用的配置rollup的动态导入和代码分割以及插件使用。这些只是rollup的一部分，它还有很多配置和技巧可以使用。

文章标签：
云解析DNS
JavaScript
前端开发
陈俊刚
目录
相关文章
陈俊刚
|
6月前
|
存储 JavaScript 前端开发
深入了解rollup（五）插件输出生成钩子
输出生成钩子可以提供有关生成的产物的信息并在构建完成后修改构建。它们的工作方式和类型与 构建钩子 相同，但是对于每个调用 bundle.generate(outputOptions) 或 bundle.write(outputOptions)，它们都会单独调用。仅使用输出生成钩子的插件也可以通过输出选项传递，并且因此仅针对某些输出运行。
陈俊刚
154 0
石小石Orz
|
3月前
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
石小石Orz
413 4
陈俊刚
|
6月前
|
缓存 前端开发 JavaScript
深入了解rollup（三）插件机制
Rollup 插件是一个对象，具有属性]、构建钩子 和 输出生成钩子 中的一个或多个，并遵循我们的约定。插件应作为一个导出一个函数的包进行发布，该函数可以使用插件特定的选项进行调用并返回此类对象。 插件允许你通过例如在打包之前进行转译代码或在node_modules文件夹中查找第三方模块来自定义 Rollup 的行为。
陈俊刚
132 1
陈俊刚
|
6月前
|
JSON 前端开发 JavaScript
深入了解rollup（四）插件开发示例
Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的插件开发。
陈俊刚
82 1
陈俊刚
|
6月前
|
JavaScript 前端开发 开发者
深入了解rollup（一）快速开始
Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让你今天就可以开始这样做。
陈俊刚
89 0
BNTang
常用配置
更改 File And Code Templates 选中 Includes 添加如下内容：
BNTang
44 0
编程达人
Vite：rollup-plugin-visualizer查看打包体积分析report报告
Vite：rollup-plugin-visualizer查看打包体积分析report报告
编程达人
1460 0
Vite：rollup-plugin-visualizer查看打包体积分析report报告
candytong
|
JavaScript 前端开发 API
Vite 是如何使用 Rollup 进行构建的
Vite 是如何使用 Rollup 进行构建的
candytong
326 0
2分钟速写快排
|
JavaScript 前端开发 算法
rollup 是什么？如何使用？
继 Webpack、Vite 等前端工具链系列的了解之后，又碰到了 Rollup，我之前对 Rollup 的了解仅停留在 Vite 打包时使用、组里的大佬使用 Rollup 写过一个静态官网页面，为了
2分钟速写快排
663 2
bigerfe
|
JSON 前端开发 JavaScript
基于rollup打造组件库，你可能会用到这些插件
最近在重复赵轮子，用rollup搞一个react 组件库，今天就简单整理下用到的插件。 简单来说插件就是能力者，帮助你完成某事，相信大家都用过webpack构建项目，我们会用到各种plugin和loader来帮我们处理js、css、图片、压缩代码等，那么在rollup里想要完成某事，也同样需要对应的plugin来完成，而且rollup的配置会更加简单。
bigerfe
950 1
基于rollup打造组件库，你可能会用到这些插件