JavaScript模块打包器rollup

最新推荐文章于 2024-05-27 09:48:22 发布
置顶 最新推荐文章于 2024-05-27 09:48:22 发布
阅读量1k 收藏 2
点赞数 3
分类专栏： 学习笔记 文章标签： rollup 大前端高薪训练营 JavaScript模块打包器 拉勾
来自清心的博客
本文链接：https://blog.csdn.net/jw2268136570/article/details/111414088
版权

学习资料：拉勾课程《大前端高薪训练营》
阅读建议：搭配文章的侧边栏目录进行食用，体验会更佳哦。
内容说明：本文不做知识点的搬运工，技术详情请查看官方文档。

一：认识rollup

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
它是一个小而美的JavaScript打包工具，与webpack适用于打包应用相比，rollup更加适用于类库的打包，其运行机制比较简单，如下图所示：
在这里插入图片描述
接下来我们先看一个简单示例来帮助我们更好地理解rollup这个打包工具的功能作用以及使用场景，而后学习一些rollup的一些常用配置和插件，最后尝试实现一个简单的JavaScript打包工具进而学习rollup原理。

二：简单示例

需求：通过rollup打包工具，把用ES6模块化规范编写的多个模块文件代码合并到各种模块化规范下的一个模块文件中。

下面用函数式编程思想，从输入、打包、输出这三个方面来叙述这个简单示例的打包过程逻辑。

1. 打包输入（input）

  • module.js：被引入的模块，涉及模块的导出操作
const message = 'hello rollup';

const noUsedVar = 'this is a no used variable';

export const testFn = () => {
    console.log(message)
}
  • index.js：主入口，涉及模块的导入导出操作
import { testFn } from './module1'

const noUsedFn = () => {
  console.log('this is a no used function')
}

testFn()

export default {}

2.打包（action）

  • 安装rollup
yarn global add rollup
  • 配置：rollup.config.js

这里打包成 iife 以及几种我们常见的模块化规范。

export default {
    input: 'src/index.js',
    output: [{
            file: 'dist/bundle.iife.js',
            name: 'indexBundle',
            format: 'iife'
        },
        {
            file: 'dist/bundle.cjs.js',
            format: 'cjs'
        },
        {
            file: 'dist/bundle.amd.js',
            format: 'amd'
        },
        {
            file: 'dist/bundle.es.js',
            format: 'es'
        },
        {
            file: 'dist/bundle.umd.js',
            name: 'indexBundle',
            format: 'umd'
        },
    ],
}
  • 读取配置文件执行打包
rollup -c rollup.config.js

3.打包结果（output）

  • bundle.iife.js
var indexBundle = (function () {
    'use strict';

    const message = 'hello rollup';

    const testFn = () => {
        console.log(message);
    };

    testFn();

    var index = {};

    return index;

}());
  • bundle.cjs.js
'use strict';

const message = 'hello rollup';

const testFn = () => {
    console.log(message);
};

testFn();

var index = {};

module.exports = index;
  • 为了避免代码篇幅过长，其它三个规范的代码输出就不再粘贴了。

通过这个简单示例，我们就可以很好的理解rollup 是一个 JavaScript 模块打包器的概念，以及它可以实现将小块代码编译成大块复杂代码的功能。

除此之外很重要的几点是：

  • 它可以接收多种符合模块化规范的模块输入并打包输出成符合各种模块化规范的模块输出，
  • 在打包的过程中，会自动tree-shaking去掉没有引用的变量键及其值。
  • 打包输出结果更扁平，代码依然可读。

再通过上述叙述以及简单示例认识了rollup之外，接下来我们简单探讨一下rollup的打包原理而后总结一些它的常见需求及其配置实现。

三：rollup打包原理

从本质上来说，rollup只是一个文件内容的转换脚本。如果要实现将多个ES模块打包为一个ES模块的需求（最简单的ES6模块打包），那么个人觉得应该重点关注两件事情，一个是模块聚合，一个模块tree-shaking。

对于模块聚合，个人刚开始的思路是通过正则的方式来实现，也即使用正则 /(?:import).+?from[\s]*([’"])[^\1]+?\1/g 来匹配模块中的import语句，用正则 /([’"])([^\1]+?)\1/ 来提取出import语句中的相对路径，这样可以提取出完整的import语句信息。然后读取被导入模块的内容，通过递归就可以读取解析依赖的所有模块。这样就可以实现模块聚合（字符串层面，非语法层面）。

但是上述把代码作为字符串来做正则匹配的方式会有很多问题，比如说聚合后，多个命名空间变为了一个，肯定会出现大片的程序错误。显而易见，简单的通过把代码视为字符串并通过正则匹配来实现模块聚合的方式不可取。

而对于模块的tree-shaking，正则的方式就更无从实现了，因为tree-shaking的实现必然要依赖于代码的上下文。

通过网上搜索资料以及查看rollup源码发现，rollup是通过使用acorn这个库把JavaScript代码解析为抽象语法树ast的方式来实现的模块聚合和tree-shaking。

那么在用ast和acorn的路线实现个人的rollup打包工具之前，有必要先简单探讨一下抽象语法树ast和JavaScript抽象语法树的解析库acorn。

1.ast（Abstract Syntax Tree）：抽象语法树

行文参考资料：

(1): 认识抽象语法树

在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

Javascript的语法是为了给开发者更好的编程而设计的，但是不适合程序的理解。所以需要转化为AST来更适合程序分析，浏览器编译器一般会把源码转化为AST来进行进一步的分析等其他操作。

比如说有一段JavaScript代码：

import module from './module'

const a = module.a;

function fn(arg) {
	console.log(arg)
}

fn(a)

export default {}

通过AST Explorer这个抽象语法树可视化网站解析上述代码后，可以得到其抽象语法树的结构是这样的（折叠后）：
在这里插入图片描述
这里可以看到，我们的代码从上往下有序的被解析为了一个个node节点，这些node节点各有类型，比如：

  • import语句对应于ImportDeclaration类型的node
  • var、const、let等变量声明语句对应于VariableDeclaration类型的node
  • function函数声明语句对应于FunctionDeclaration类型的node
  • 函数调用等表达式对应于ExpressionStatement类型的node
  • export语句对应于ExportDefaultDeclaration类型的node

每个节点的内部内部也会被解析，直到解析到底为止。这样，整个代码在解析过后，会得到一颗与代码的编码顺序有关的抽象语法树以便于程序识别（造轮子的利器啊）。

具体的细节，本文不再展开讨论。在了解了抽象语法树的概念及其可以解析代码以便程序理解的作用之后，我们接下来叙述一些抽象语法树的常用用途。

(2): 抽象语法树用途
用于代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
  • 如JSLint、JSHint对代码错误或风格的检查，发现一些潜在的错误
  • IDE的错误提示、格式化、高亮、自动补全等等
代码混淆压缩
  • UglifyJS2等
优化变更代码，改变代码结构使达到想要的结构
  • 代码打包工具webpack、rollup等等
  • CommonJS、AMD、CMD、UMD等代码规范之间的转化
  • CoffeeScript、TypeScript、JSX等转化为原生Javascript

2.acorn

在造轮子的过程中，如果我们希望得到一份JavaScript代码的抽象语法树，我们就会需要一个JavaScript语言的语法解析工具，比较成熟的JavaScript语法解析库有以下几种：

  • esprima
  • traceur
  • acorn
  • shift

由于rollup是使用的acorn做的语法解析，那么我们接下来就简单探讨一下acorn的使用。

在yarn add acorn 安装好acorn这个库后，以下是基本使用案例（生成的语法树结构与上面所述一致，此处就不贴出来了，想查看可以把代码粘贴到AST Explorer来查看语法树结构）：

  • 案例1：JavaScript非模块代码解析
const acorn = require("acorn");
const util = require("util");	// 用于使console.log打印对象时子对象不折叠

const code = `
function add (a, b) {
  return a + b
}
`;
const ast = acorn.parse(code, {ecmaVersion: 2020});
console.log(util.inspect(ast, {showHidden: false, depth: null}));
  • 案例2：JavaScript模块代码解析
const acorn = require("acorn");
const util = require("util");	// 用于替代console.log，打印对象不会折叠
const fs = require("fs");

const code = fs.readFileSync(__dirname + '/test2.js', {encoding: 'utf8'});
const ast = acorn.parse(code, { ecmaVersion: 2020, sourceType: "module" }); // 代码类型为模块
console.log(util.inspect(ast, {showHidden: false, depth: null}));

3.rollup打包原理

在认识了ast以及acorn之后，我们就可以以解析抽象语法树的方式来实现将多个ES模块打包为一个ES模块的需求了，实现过程如下（始终关注模块聚合与模块tree-shaking两点）：

准备被导入的模块：module1.js
const usedData = "module1: this is a used data"
const noUsedData = "module1: this is a no used data"

export default  {
    usedData
}
准备主（入口）模块：index.js
import moduleData from './module1'

const indexUsedData = "index: this is a used data"
const indexNoUsedData = "index: this is a no used data"

const testFn = () => {
    console.log(indexUsedData)
};

testFn();

export default {
    "xxx": 'ooo'
}
最简化、定制版的打包：myRollup.js
const acorn = require("acorn");
const fs = require("fs");

// 1.读取入口
const indexCodeStr = fs.readFileSync(__dirname + '/index.js', {
  encoding: 'utf8'
})

// 2.解析入口
const getModuleInfo = (codeStr) => {
  // 当前模块下的所有标识符，标识符作为键
  const importInfo = {}
  const moduleVarInfo = {}

  // 当前模块使用到的所有标识符
  const usedExpOrVarArr = []
  // 入口暴露的字符串需保留
  const exportInfo = {}
  let exportStr = ''
  
  const ast = acorn.parse(codeStr, {
    ecmaVersion: 2020,
    sourceType: "module" // 代码类型为模块
  });
  ast.body.forEach(node => {
    switch (node.type) {
      case "ImportDeclaration":
        // 解析模块导入：import语句
        const localName = node.specifiers[0].local.name
        importInfo[localName] = node.source.value
        break
      case "VariableDeclaration":
        const varInfo = node.declarations[0]
        moduleVarInfo[varInfo.id.name] = node
        break
      case "ExpressionStatement":
        const fnName = node.expression.callee.name
        usedExpOrVarArr.push({
          type: 'varNode',
          name: fnName
        })
        const fnNode = moduleVarInfo[fnName]
        const fnIncludedKey = fnNode.declarations[0].init.body.body[0].expression.arguments[0].name
        usedExpOrVarArr.unshift({
          type: 'varNode',
          name: fnIncludedKey
        })
        usedExpOrVarArr.push({
          type: 'express',
          data: codeStr.slice(node.start, node.end)
        })
        break
      case "ExportDefaultDeclaration":
        // 解析模块导出：Export语句
        const property = node.declaration.properties[0]
        const exportKey = property.key.name
        const exportTar = moduleVarInfo[property.value.name]
        exportInfo[exportKey] = exportTar
        usedExpOrVarArr.push({
          type: 'varNode',
          name: exportKey
        })
        exportStr = codeStr.slice(node.start, node.end)
        break
    }
  });
  return {
    importInfo,
    moduleVarInfo,
    exportInfo,
    exportStr,
    usedExpOrVarArr
  }
}

const indexModuleInfo = getModuleInfo(indexCodeStr)

// 3.准备输出
let writeStr = ''
const {
  moduleVarInfo: indexModuleVarInfo,
  importInfo: indexImportInfo,
  exportStr: indexExportStr
} = indexModuleInfo

indexModuleInfo.usedExpOrVarArr.forEach((usedExpOrVar) => {
  if (usedExpOrVar.type === 'express') {
    const expressStr = usedExpOrVar.data
    writeStr += expressStr + '\r\n'
  }  else if (usedExpOrVar.type === 'varNode') {
    const usedVarName = usedExpOrVar.name
    if (usedVarName in indexModuleVarInfo) {
      const curUsedVarNode = (indexModuleVarInfo[usedVarName])
      writeStr += indexCodeStr.slice(curUsedVarNode.start, curUsedVarNode.end) + '\r\n'
    } else if (usedVarName in indexImportInfo) {
      const importModuleCodeStr = fs.readFileSync(__dirname + importInfo[usedVarName], {
        encoding: 'utf8'
      })
      const curUsedVarNode = getModuleInfo(importModuleCodeStr).indexImportInfo[usedVarName] // 假设它没有再import
      writeStr += curUsedVarNode.slice(curUsedVarNode.start, curUsedVarNode.end) + '\r\n'
    }
  }

})

writeStr += '\r\n' + indexExportStr
fs.writeFileSync(__dirname + '/bundle.js', writeStr)

哈哈，已经精简我都不好意思分析了。总的来说，思路就是如下：

  • 一个文件就是一个模块，一个 AST 语法抽象树
  • 解析模块时，找到并按顺序注册该模块的所有标识符（导入的标识符、本模块内定义的标识符）放入importInfo和moduleVarInfo中。
  • 解析模块时，碰到表达式就直接把表达式字符串放入usedExpOrVarArr中，如果是函数表达式就进入解析，把表达式用到的所有标识符以及当前表达式按先后顺序放入usedExpOrVarArr中。
  • 解析usedExpOrVarArr，按顺序拼接表达式用到的所有标识符的定义字符串、表达式，最后再加入入口模块的暴露字符串exportStr。
  • 输出上述拼接后的字符串
打包后的结果
  • 打包结果：使用rollup.js
const indexUsedData = "index: this is a used data";

const testFn = () => {
    console.log(indexUsedData);
};

testFn();

var index = {
    "xxx": 'ooo'
};

export default index;
  • 打包结果：使用myRollup.js
const indexUsedData = "index: this is a used data"
const testFn = () => {
    console.log(indexUsedData)
};
testFn();

export default {
    "xxx": 'ooo'
}

如此可以看到，模块聚合以及tree-shaking都已经实现了。这里再简单提一提关键的两个问题。一个是模块聚合的多个命名空间合并为一个的问题，简单起见，此处案例没有考虑。而对于rollup的tree-shaking原理，个人理解，它是因为rollup在解析代码的抽象语法树后，并不会把所有的标识符的定义字符串都打包输出，而是只把表达式中用到的标识符的定义字符串打包输出，没用到的自然而然就被过滤掉了。

在简单学习rollup打包原理之后，接下来我们了解一些我们使用rollup时的常见需求及其配置。

四：常见需求及其配置

1.入口与输出

在使用rollup打包的过程中，对于打包入口与打包输出，我们通常会有以下四种形式：

类型配置方式
单输入单输出export default: obj, output: obj
单输入多输出export default: obj, output: arr
多输入单输出export default: arr, output: obj
多输入多输出export default: arr, output: arr

对于配置中的具体表现形式，可以看如下配置示例：

// 多输入多输出
export default [{
    input: 'src/index1.js',
    output: [{
        file: 'dist/bundle.iife.js',
        format: 'iife'
    }, {
        file: 'dist/bundle.cjs.js',
        format: 'cjs'
    }]
}, {
    input: 'src/index2.js',
    output: [{
        file: 'dist/bundle.iife.js',
        format: 'iife'
    }, {
        file: 'dist/bundle.cjs.js',
        format: 'cjs'
    }]
}, ]

2.常用Plugin

打包本质上是个转换过程，这个过程rollup通过插件机制（钩子思想）让我们能够访问并操作这个转换切面，官方插件列表rollup plugins，其中最常见的插件有如下几种：

需求插件名
Babel转换@rollup/plugin-babel
支持打包json模块@rollup/plugin-json
支持打包cjs模块@rollup/plugin-commonjs
支持打包node_module中的模块@rollup/plugin-node-resolve
打包结果压缩@rollup/plugin-terser
……

对于插件的使用，下文是一个插件使用示例：

  • 配置文件
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'	// 帮助寻找node_modules里的包
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import {terser} from '@rollup/plugin-terser'

export default {
    input: 'src/index.js',
    external: ['lodash']// 外部依赖，不打包
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'index',
        // plugins: [terser()]// 压缩
    },
    plugins: [
   		json(),
        resolve(),
        commonjs(),
        babel({
      		exclude: '**/node_modules/**'
    	})
    ]，
}
  • 代码引用
import { name, version } from '../package.json'
import _ from 'lodash'
import cjs from './cjs-module'

console.log(name, version)
console.log(_.add(1 + 1))
console.log(cjs.msg)
  • 打包结果（未压缩、lodash作为外部依赖）
(function (_) {
  'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);

  var name = "00-mine";
  var version = "1.0.0";

  var cjsModule = {
    msg: 'i am a cjs module'
  };

  console.log(name, version);
  console.log(___default['default'].add(1 + 1));
  console.log(cjsModule.msg);

}(_));

3.代码分割

代码分割可以实现代码模块的按需加载和懒加载，提高构建以及文件加载速度。通常来说会有两种方式来实现代码分割，即：

  • 多入口打包
  • 动态导入

多入口打包通常是从大业务上进行代码分割，其配置实现通过上述第一点中所述，以多入口多输出方式配置即可。

而动态导入则通常可以用于在小业务以及代码逻辑上进行代码分割，其逻辑和实现也很简单，示例代码如下（index.js）：

if (fileNotExist(filePath)) {
	import('fileUtils').then(({ createFile }) => {
	  createFile(filePath)
	})
}

本文结束，谢谢观看。
如若认可，点赞收藏。

iamjwe
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js的代码混肴:rollup
zhangiser的专栏
03-03 506
Rollup是一个用于JavaScript的模块打包器，它将小块代码编译成更大、更复杂的包内，例如库或应用程序。代替以前的版本，如CommonJS和AMD，它使用标准化模块ES6模块写成的。ES模块可以让您从您喜爱的库中灵活的组合最有用的函数。
一个强大的 JS 代码混淆工具
chunzhenwangluo的博客
11-09 3370
【导语】：一个开源的代码混淆器，能将 JS 代码混淆成可读性低的代码。 简介 JavaScript Obfuscator 是一款功能强大的免费 JavaScript 混淆器，包含多种功能，能将代码混淆成可读性低的代码，看上去是难以阅读的代码，其实具备和之前代码一样的功能，从而起到保护代码的作用。 原代码： function hi() { console.log("Hello World!"); } hi(); 复制代码 混淆后代码： function _0x5737(){var _0x3
rollup打包原理以及实现rollup
yutao618的博客
05-27 6100
前言 上一篇文章已对rollup具体使用做了详细的介绍，这篇文章学习下rollup原理。由于篇幅有限，拉取了rollup最初版本的代码（0.3.0版本）。我的目的是学习 rollup 怎么打包的，怎么做 tree-shaking 的。而初版源码已经实现了这两个功能（半成品），所以看初版源码已经足够了。 前置知识 rollup 使用了 acorn 和 magic-string 两个库。为了更好的阅读 rollup 源码，必须对它们有所了解。 "dependencies": { "acorn": "^1.1
rollup - 构建原理及简易实现
azl397985856的专栏
07-01 1213
黄丹丹，微医前端技术部医疗支撑组。一个资深猫奴，爱静亦爱动无痕切换的精分程序媛。一、Rollup 概述官网地址：https://rollupjs.org/guide/en/Rollup 是...
利用Rollup实现代码分割的绝佳起点：rollup-starter-code-splitting
最新发布
gitblog_00026的博客
05-27 224
利用Rollup实现代码分割的绝佳起点：rollup-starter-code-splitting 项目地址:https://gitcode.com/rollup/rollup-starter-code-splitting 本文将向您推荐一个极简示例项目——rollup-starter-code-splitting，它展示了如何借助Rollup构建应用，并实现代码拆分和动态导入功能。对于追求高效打...
rollup 3.x + vue2 打包组件(jsx)
qq_34793381的博客
03-22 1451
网上很多文章，告诉你如何配置 rollup , 一次性下载很多包，虽然模仿着做了，但是，可能依旧会报错；本次从包的关联关系，包的版本说明，以及出现问题如何解决，记录一次 rollup 配置 vue 打包实践。希望对你有帮助2023-03-21 上述包为最新版本掘金地址。
实现 rollup 实现多模块打包
09-21
Rollup是一款模块打包器，其设计思路是"从最小单位开始，逐层构建"，它以ES6模块为基础，能够将小块代码编译成大块复杂的库或应用。与Webpack相比，Rollup更专注于优化库的构建，尤其适合创建具有扁平化的依赖关系图...
grunt-rollup:用于汇总的 Grunt 插件 - 下一代 ES6 模块打包器
08-04
咕噜咕噜 用于Grunt 插件 - 下一代 ES6 模块打包器入门这个插件需要 Grunt >=0.4.0和 node >=8.6.0 。 如果您以前没有使用过 ，请务必查看指南，因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后，您...
使用rollup打包JS的方法步骤
10-17
Rollup是一个模块打包器，专注于将JavaScript模块打包成单一文件，以便在浏览器或Node.js环境中运行。与Webpack不同，Rollup基于ES6的模块系统，更适合打包库和框架，如Vue的源码。本文将详细介绍如何使用Rollup进行...
Fastpack是一个快速和简便的JavaScript应用打包器
08-07
在现代Web开发中，JavaScript应用的模块化已经成为了标准，Webpack、Rollup等打包工具广泛应用。然而，随着项目规模的扩大，打包过程可能会变得越来越耗时，这不仅影响了开发者的迭代速度，也增加了等待时间。...
gulp-better-rollup::package: 更好的 Gulp 插件，用于 Rollup ES6 模块打包器
05-29
与相比，这个插件将 Rollup 更深入地集成到 Gulps 管道链中。 它需要一些 Rollup API，以换取对管道的全部权力（使用任何 gulp 插件）。这个怎么运作Rollup 旨在处理读取文件、构建依赖树、转换内容，然后写入转换...
从 rollup 初版源码学习打包原理
油墨香^-^的博客
03-03 212
从我们的示例中可以看出，一共引入了 foo1() foo2() 两个函数，_dependsOn 里却只有 foo1()，因为引入的 foo2() 没有调用。│ module.js // Module 模块，开发者自己写的代码文件，都是 module 实例。如果有，就查看所调用的函数或方法是否在当前作用域，如果不在就往上找，直到找到模块顶级作用域为止。│ bundle.js // Bundle 打包器，在打包过程中会生成一个 bundle 实例，用于收集其他模块的代码，最后再将收集的代码打包到一起。
Rollup基础篇
欣欣博客
12-10 1836
rollup
初识rollup 打包、配置vue脚手架
ngd-b的博客
03-09 1635
rollup javascript 代码打包器，它使用了 es6 新标准代码模块格式。 面向未来，拥抱 es 新标准，支持标准化模块导入、导出等新语法。 tree shaking 静态分析导入的代码。排除未实际引用的内容
vue3+vite 代码混淆插件
Yujis的博客
02-10 4384
代码混淆插件
vue打包js文件混淆加密保护
热门推荐
大英雄不该去雪山打滚
11-22 1万+
需求 部署到服务器上的vue项目在网页F12之后能看到源码，vue文件啦，js文件啦，都能看到，连我的注释都能看到，这能随便给别人看？ 环境 vue 3 vue cli 4 webpack 4 解决方案 方案一 工具：“uglifyjs-webpack-plugin”: “^2.2.0” 使用： const UglifyJsPlugin = require('uglifyjs-webpack-plugin') ... module.exports = { configureWebpack: {
个人使用 rollup 整理的一些配置说明
Zn 的个人技术分享
10-29 798
对 Vite 构建使用的幕后工具 rollup 今天进行了一部分整理，算是给自己以后搭建项目的时候预留一个参考。(当前配置版本 rollup 3.2.3)
@rollup/plugin-terser 用法
CS304961760的博客
03-10 2546
@rollup/plugin-terser` 是一个用于压缩 JavaScript 代码的插件。通过以上步骤，您现在已经可以使用 `@rollup/plugin-terser` 插件来压缩 JavaScript 代码了。2. 在 `rollup.config.js` 文件中导入 `@rollup/plugin-terser`1. 安装 `@rollup/plugin-terser` 插件。3. 在 `plugins ` 中添加 `terser` 插件。4. 配置 `terser` 插件。
rollup打包html
05-22
Rollup 是一个 JavaScript 模块打包器，它主要用于打包 JavaScript 应用程序或库。它通常用于打包 Node.js 应用程序和库，但是也可以用于打包浏览器端应用程序。 Rollup 不支持直接打包 HTML 文件，但是可以使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值