rollup打包起手式

本文详细介绍了Rollup这款轻量级的JavaScript打包工具,包括全局安装、基本用法、配置文件、插件应用、树摇优化、与其他工具集成以及与Webpack的区别。重点展示了如何使用Rollup处理各种模块格式和配置Babel进行代码转换。
摘要由CSDN通过智能技术生成

使用Rollup打包JavaScript

rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化,有效减少文件请求大小,vue在开发的时候用的是webpack,但是最后将文件打包在一起的时候用的是 rollup.js

全局安装

npm install --global rollup

创建第一个bundle,创建main.js

console.log(111);

执行 rollup --input main.js --output bundle.js --format cjs, 该命令编译 main.js 生成 bundle.js, --format cjs 意味着打包为 node.js 环境代码, 请观察 bundle.js 文件内容

'use strict'
console.log(111);

命令行参数简介:

  • 输入(input -i/–input)
    String 这个包的入口点 (例如:你的 main.js 或者 app.js 或者 index.js)

  • 文件(file -o/–output.file)
    String 要写入的文件。也可用于生成 sourcemaps,如果适用

  • 格式(format -f/–output.format)
    关于format选项
    rollup提供了五种选项:

格式化成如下文件

  • amd – 异步模块定义,用于像RequireJS这样的模块加载器
  • cjs – CommonJS,适用于 Node 和 Browserify/Webpack
  • es – 将软件包保存为ES模块文件
  • iife – 一个自动执行的功能,适合作为

使用配置文件

rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};

执行 rollup -c rollup.config.js启动配置项;

rollup 提供了 --watch / -w 参数来监听文件改动并自动重新打包

使用rollup插件

rollup.config.js

npm install --save-dev rollup-plugin-json


我们用的是 --save-dev 而不是 --save,因为代码实际执行时不依赖这个插件——只是在打包时使用。

在配置文件中启用插件

import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    plugins: [
        json(),
    ],
}

新建文件 data.json

{
    "name": "xiaoming",
    "age": 12
}

在main.js 引入 data.json

import { name } from './data.json';
console.log(name);

执行 rollup -c rollup.config.js,并查看 bundle.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (factory());
}(this, (function () { 'use strict';

var name = "xiaoming";

console.log(name);

})));

看到bundle中仅引用了data.json中的name字段,这是因为rollup会自动进行 Tree-shaking,main.js中仅引入了name,age并没有没引用,所以age并不会被打包

rollup基础插件

  • rollup-plugin-alias: 提供modules名称的 alias 和reslove 功能
  • rollup-plugin-babel: 提供babel能力
  • rollup-plugin-eslint: 提供eslint能力
  • rollup-plugin-node-resolve: 解析 node_modules 中的模块
  • rollup-plugin-commonjs: 转换 CJS -> ESM, 通常配合上面一个插件使用
  • rollup-plugin-serve: 类比 webpack-dev-server, 提供静态服务器能力
  • rollup-plugin-filesize: 显示 bundle 文件大小
  • rollup-plugin-uglify: 压缩 bundle 文件
  • rollup-plugin-replace: 类比 Webpack 的 DefinePlugin , 可在源码中通过 process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.

rollup于其他工具集成

打包npm 模块

于webpack和Browserify不同, rollup 不会去寻找从npm安装到你的node_modules文件夹中的软件包;
rollup-plugin-node-resolve 插件可以告诉 Rollup 如何查找外部模块

npm install --save-dev rollup-plugin-node-resolve

打包 commonjs模块

npm中的大多数包都是以CommonJS模块的形式出现的。 在它们更改之前,我们需要将CommonJS模块转换为 ES2015 供 Rollup 处理。
rollup-plugin-commonjs 插件就是用来将 CommonJS 转换成 ES2015 模块的。
请注意,rollup-plugin-commonjs应该用在其他插件转换你的模块之前 - 这是为了防止其他插件的改变破坏CommonJS的检测

npm install --save-dev rollup-plugin-commonjs

使用babel

使用 Babel 和 Rollup 的最简单方法是使用 rollup-plugin-babel

npm install --save-dev rollup-plugin-babel

新建.babelrc

{
  "presets": [
      ["latest", {
          "es2015": {
              "modules": false
          }
      }]
  ],
  "plugins": ["external-helpers"]
}
  • 首先,我们设置"modules": false,否则 Babel 会在 Rollup 有机会做处理之前,将我们的模块转成 CommonJS,导致 Rollup 的一些处理失败
  • 我们使用external-helpers插件,它允许 Rollup 在包的顶部只引用一次 “helpers”,而不是每个使用它们的模块中都引用一遍(这是默认行为)
    运行 rollup之前, 需要安装latest presetexternal-helpers插件
npm i -D babel-preset-latest babel-plugin-external-helpers

一个简单的配置项

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
   input: './main.js',
   output: {
       file: 'bundle.js',
       format: 'umd'
   },
   watch: {
       exclude: 'node_modules/**'
   },
   plugins: [
       resolve(),
       commonjs(),
       json(),
       babel({
           exclude: 'node_modules/**',
           plugins: ['external-helpers'],
       }),
   ],
}

rollup优势

  • 自动 Tree-shaking(Tree-shaking, 也被称为 “live code inclusion,” 它是清除实际上并没有在给定项目中使用的代码的过程,但是它可以更加高效。)
  • 打包速度快
  • 配置简单

rollup VS webpack

rollup更适合构建javascript库,也可用于构建绝大多数应用程序;但是rollup 还不支持一些特定的高级功能,尤其是用在构建一些应用程序的时候,特别是代码拆分和运行时态的动态导入 dynamic imports at runtime.如果你的项目中需要这些功能,则使用webpack更为适合;

  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Rollup 是一个 JavaScript 模块打包器,它主要用于打包 JavaScript 应用程序或库。它通常用于打包 Node.js 应用程序和库,但是也可以用于打包浏览器端应用程序。 Rollup 不支持直接打包 HTML 文件,但是可以使用插件来处理 HTML 文件。下面是一些常用的 Rollup 插件,可以帮助你打包 HTML 文件: 1. rollup-plugin-html:这个插件可以在打包过程中将 HTML 文件转换为 JavaScript 模块。它还支持将 CSS 文件内联到 HTML 文件中。你可以使用这个插件来打包单个 HTML 文件或多个 HTML 文件。 2. rollup-plugin-terser:这个插件可以在打包过程中压缩 JavaScript 代码和 HTML 内容。它可以帮助你减小文件大小并提高网站性能。 3. rollup-plugin-posthtml:这个插件可以在打包过程中使用 PostHTML 处理 HTML 文件。它支持使用各种插件来转换 HTML 内容,例如添加 CSS 前缀、压缩 HTML、优化图像等。 使用 Rollup 打包 HTML 文件的具体步骤如下: 1. 安装 Rollup 及相关插件: ``` npm install rollup rollup-plugin-html rollup-plugin-terser rollup-plugin-posthtml --save-dev ``` 2. 创建一个 Rollup 配置文件: ``` // rollup.config.js import html from 'rollup-plugin-html'; import { terser } from 'rollup-plugin-terser'; import posthtml from 'rollup-plugin-posthtml'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ html({ include: '**/*.html' }), terser(), posthtml() ] } ``` 3. 在 HTML 文件中使用 JavaScript 模块: ``` <!DOCTYPE html> <html> <head> <title>My App</title> </head> <body> <script type="module" src="./dist/bundle.js"></script> </body> </html> ``` 4. 运行 Rollup 命令进行打包: ``` rollup -c ``` 以上就是使用 Rollup 打包 HTML 文件的基本步骤。需要注意的是,如果你的应用程序依赖于其他文件(例如 CSS、图像等),则需要在 Rollup 配置文件中添加相应的插件来处理这些文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值