库打包工具 rollup

news2024/11/12 14:50:21

库打包工具 rollup


摘要

**概念:**rollup是一个模块化的打包工具

注:实际应用中,rollup更多是一个库打包工具

与Webpack的区别:

文件处理:

  • rollup 更多专注于 JS 代码,并针对 ES Module 进行打包
  • webpack 通常可以通过各种 loader 处理多种文件及其对应的依赖关系

应用场景:

  • 在实际项目开发中,通常使用webpack(比如react、angular项目都是基于webpack的)
  • 在对库文件进行打包时,通常会使用rollup(比如vue、react、dayjs源码本身都是基于rollup的,Vite底层使用Rollup)。



概念

官方对rollup的定义:

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Rollup是一个JavaScript的模块化打包工具,可以帮助我们编译小的代码到一个大的、复杂的代码中,比如一个库或者一个应用程序;

我们会发现Rollup的定义、定位和webpack非常的相似:

  • Rollup也是一个模块化的打包工具,但是Rollup主要是针对ES Module进行打包的,webpack则通常可以通过各种loader处理各种各样的文件,以及处理它们的依赖关系。
  • rollup更多时候是专注于处理JavaScript代码的(当然也可以处理css、font、vue等文件)。
  • rollup的配置和理念相对于webpack来说,更加的简洁和容易理解; 在早期webpack不支持tree shaking时,rollup具备更强的优势。

webpack和rollup各自的应用场景:

通常在实际项目开发中,我们都会使用webpack(比如react、angular项目都是基于webpack的)

在对库文件进行打包时,我们通常会使用rollup(比如vue、react、dayjs源码本身都是基于rollup的,Vite底层使用Rollup)。




Rollup的基本使用

安装rollup:

# 全局安装 
npm install rollup -g
# 局部安装 
npm install rollup -D

创建main.js文件,打包到bundle.js文件中:

参数:

-f : format

-f cjs // commonjs,支持node环境
-f iife // 立即执行函数表达式
-f amd // amd,支持amd环境
-f umd // umd,支持通用的模块化环境
# 打包浏览器的库 
npx rollup ./src/main.js -f iife -o dist/bundle.js 

# 打包AMD的库 
npx rollup ./src/main.js -f amd -o dist/bundle.js

# 打包CommonJS的库 
npx rollup ./src/main.js -f cjs -o dist/bundle.js 

# 打包通用的库(必须跟上name) 
npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js

Case: 打包index为bundle.js

指令如下所示:

nathanchen@NathansMacBook-Pro rollup % npx rollup ./lib/index.js -f umd --name mathUtil -o dist/bundle.js

./lib/index.js → dist/bundle.js...
created dist/bundle.js in 22ms

index.js

function foo() {
  console.log("foo excetion")
}

export {
  foo
}

bundle.js

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

  function foo() {
    console.log("foo excetion");
  }

  exports.foo = foo;

}));



Rollup的配置文件

我们可以将配置信息写到配置文件中rollup.config.js文件。

module.exports = {
  // 入口
  input: "./lib/index.js",
  // 出口
  output: {
    format: "umd",
    name: "nathanUtils",
    file: "./build/bundle.umd.js"
  },
}

执行命令即可,-c指的是使用配置文件:

npx rollup -c

我们可以对文件进行分别打包,打包出更多的库文件(用户可以根据不同的需求来引入)。

module.exports = {
  // 入口
  input: "./lib/index.js",
  // 出口
  output: 
  [
    {
      format: "umd",
      name: "nathanUtils",
      file: "./build/bundle.umd.js"
    },
    {
      format: "amd",
      name: "nathanUtils",
      file: "./build/bundle.amd.js"
    },
    {
      format: "cjs",
      name: "nathanUtils",
      file: "./build/bundle.cjs.js"
    },
    {
      format: "iife",
      name: "nathanUtils",
      file: "./build/bundle.browser.js"
    },
  ]
}



解决commonjs和第三方库问题

**问题背景:**引入第三方包,比如 Lodash,进行打包时,发现没有对 引入包 进行打包。

原因:

默认 lodash 没有被打包是因为它使用的是 commonjs,rollup默认情况下只会处理 ES Module

解决方案:

安装解决commonjs的库:

npm install @rollup/plugin-commonjs -D

安装解决node_modules的库:

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

npx rollup -c 进行打包即可,可以发现 Lodash 被打包进入 bundle.js

不过在实际应用中,我们一般排除打包依赖包,当用户使用时包时,让他们自己进行安装即可

rollup.config.js

module.exports = {
  output: 
  [
    {
      format: "umd",
      name: "nathanUtils",
      file: "./build/bundle.umd.js",
      globals: {
        lodash: "_" // 给 lodash 全局命名为 _
      }
    },
  ],
  external: ["lodash"],
}



Babel 转换代码

**需求:**如果我们希望将ES6转成ES5的代码,可以在rollup中使用babel。

安装rollup对应的babel插件:

npm install @rollup/plugin-babel -D

修改配置文件:

配置 rollup.config.js

配置 babelHelpers ,不让 Babel 处理 node_modules

// 使用代码转换和压缩
const babel = require('@rollup/plugin-babel')

module.exports = {
	...
  plugins: [
    babel({
      babelHelpers: "bundled",
      exclude: /node_modules/
    })
  ]
}

配置babel.config.js

module.exports = {
  presets: ["@babel/preset-env"]
}

产物:

打包前 babel.config.js

import { sum, mul } from './utils/math'

const foo = () => {
  console.log("foo excetion")
}

export {
  foo,
  sum,
  mul
}

打包后 bundle.js

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

  function sum(num1, num2) {
    return num1 + num2
  }

  function mul(num1, num2) {
    return num1 * num2
  }

  function foo() {
    console.log("foo excetion");
  }

  exports.foo = foo;
  exports.mul = mul;
  exports.sum = sum;

}));



Teser 代码压缩

如果我们希望对代码进行压缩,可以使用@rollup/plugin-terser

npm install @rollup/plugin-terser -D

配置terser:babel.config.js

const terser = require('@rollup/plugin-terser')

module.exports = {
	...
  plugins: [
    terser()
  ]
}

打包后 bundle.js

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).nathanUtils={})}(this,(function(e){"use strict";e.foo=function(){console.log("foo excetion")},e.mul=function(e,n){return e*n},e.sum=function(e,n){return e+n}}));



处理css文件

如果我们项目中需要处理css文件,可以使用postcss:

npm install rollup-plugin-postcss postcss -D

配置postcss的插件:可以补充安装下 postcss-preset-env ,处理下样式兼容性问题

const postcss = require('rollup-plugin-postcss')

module.exports = {
	...
  plugins: [
    postcss({ plugins: [require("postcss-preset-env")]})
  ]
}



处理vue文件

处理vue文件我们需要使用rollup-plugin-vue插件

注意:默认情况下我们安装的是vue2.x的版本,所以我这里指定了一下rollup-plugin-vue的版本;

npm install rollup-plugin-vue @vue/compiler-sfc -D

使用vue的插件:vue()

打包vue报错:

在我们打包vue项目后,运行会报如下的错误:

Uncaught ReferenceError: process is not defined

这是因为在我们打包的vue代码中,用到 process.env.NODE_ENV,所以我们可以使用一个插件 rollup-plugin-replace 设置它对应的值:

npm install @rollup/plugin-replace -D

配置插件信息:

replace({
	'process.env.NODE_ENV': JSON.stringify('production')
})



搭建本地服务器

第一步:使用rollup-plugin-serve搭建服务

npm install rollup-plugin-serve -D

rollup.config.js

module.exports = {
	...
  plugins: [
	  ...
    serve({
      port: 8000,
      open: true,
      contentBase: '.' // 服务当前文件夹
    })
  ]
}

第二步:当文件发生变化时,自动刷新浏览器

npm install rollup-plugin-livereload -D

第三步:启动时,开启文件监听

npx rollup -c -w

效果:

image.png




区分开发环境

我们可以在 package.json 中创建一个开发和构建的脚本:

"scripts": {
  "build": "rollup -c --environment NODE_ENV:production",
  "serve": "rollup -c --environment NODE_ENV:development -w"
},

rollup.config.js

if (isProduction) {
  plugins.push(terser())
} else {
  const extraPlugins = [
    serve({
      port: 8000,
      open: true,
      contentBase: '.' // 服务当前文件夹
    }),
  ]
  plugins.push(...extraPlugins)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237517.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SSM+VUE小学生素质成长记录平台JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档(1万字以上)开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统:Window操作系统 2、开发工具:IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

【架构设计常见技术】

EJB EJB是服务器端的组件模型,使开发者能够构建可扩展、分布式的业务逻辑组件。这些组件运行在EJB容器中,EJB将各功能模块封装成独立的组件,能够被不同的客户端应用程序调用,简化开发过程,支持分布式应用开发。 IOC …

优选算法 - 1 ( 双指针 移动窗口 8000 字详解 )

一&#xff1a;双指针 1.1 移动零 题目链接&#xff1a;283.移动零 class Solution {public void moveZeroes(int[] nums) {for(int cur 0, dest -1 ; cur < nums.length ; cur){if(nums[cur] 0){}else{dest; // dest 先向后移动⼀位int tmp nums[cur];nums[cur] num…

鸿蒙操作系统是什么?与安卓系统有什么区别?

鸿蒙操作系统 鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司发布的一款基于微内核的面向全场景的分布式操作系统。 发展历程&#xff1a; 早期规划&#xff1a;华为从2012 年开始规划自有操作系统&#xff0c;并在芬兰赫尔辛基设立智能手机研发中心&#xff0c;招…

现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数&#xff08;1&#xff09;WAL保留空间&#xff08;2&#xff09;监听地址 4. 启动主服务器5.…

第二届计算机网络技术与电子信息工程国际学术会议(CNTEIE 2024,12月6-8日)

第二届计算机网络技术与电子信息工程国际学术会议&#xff08;CNTEIE 2024&#xff09; 2024 2nd International Conference on Computer Network Technology and Electronic and Information Engineering 重要信息 会议官网&#xff1a;www.cnteie.org 2024 2nd Internation…

Git 入门篇(一)

前言 操作系统&#xff1a;win11 64位 与gitee搭配使用 Git 入门篇&#xff08;一&#xff09; Git 入门篇&#xff08;二&#xff09; Git 入门篇&#xff08;三&#xff09; 目录 git下载、安装与配置 下载 安装 配置 git下载、安装与配置 下载 官网&#xff1a;git-…

WPS文档中的“等线”如何删除

如何删除“等线”占用的行如何删除表格之间的空行WPS文档中的“等线”是什么如果删除脚注文本占用的行 如下这种&#xff0c;在文档中添加了表格和脚注&#xff0c;发现上下表格之间有多行空行&#xff0c;鼠标选中&#xff0c;显示是“等线”&#xff0c;那么如何去除等线占用…

题目讲解15 合并两个排序的链表

原题链接&#xff1a; 合并两个排序的链表_牛客题霸_牛客网 思路分析&#xff1a; 第一步&#xff1a;写一个链表尾插数据的方法。 typedef struct ListNode ListNode;//申请结点 ListNode* BuyNode(int x) {ListNode* node (ListNode*)malloc(sizeof(ListNode));node->…

计算机网络基本概念总结

IP地址 概念 使网络中的设备都有唯一的地址标识&#xff0c;用于表示其在网络中的位置。 格式 IP地址是一个32位的二进制数&#xff0c;通常被分割为4个8位二进制数&#xff08;也就是4个字节&#xff09;&#xff0c;如&#xff1a;01100100.00001000.00001010.00000110。通常…

Pandas | 特征列大量数据异常需要填充数据时注意事项

问题描述 一组数据如下&#xff1a; df.isnull().sum()城市 0 名称 0 星级 1529 评分 0 价格 1 销量 1 省/市/区 0 坐标 0 简介 41 是否免费 0 具体地址 3 dtype: int64df[星级]0…

Science Robotics 综述揭示演化研究新范式,从机器人复活远古生物!

在地球46亿年的漫长历史长河中&#xff0c;生命的演化过程充满着未解之谜。如何从零散的化石证据中还原古生物的真实面貌&#xff1f;如何理解关键演化节点的具体过程&#xff1f;10月23日&#xff0c;Science Robotics发表重磅综述&#xff0c;首次系统性提出"古生物启发…

[编译报错]ImportError: No module named _sqlite3解决办法

1. 问题描述&#xff1a; 在使用python进行代码编译时&#xff0c;提示下面报错&#xff1a; "/home/bspuser/BaseTools/Source/Python/Workspace/WorkspaceDatabase.py", line 18, in <module>import sqlite3File "/usr/local/lib/python2.7/sqlite3/_…

EasyExcel的AbstractColumnWidthStyleStrategy注入CellStyle不生效

设置背景色 CellStyle style workbook.createCellStyle();style.setFillForegroundColor(IndexedColors.RED.getIndex()); // 是设置前景色不是背景色style.setFillPattern(FillPatternType.SOLID_FOREGROUND)EasyExcel.writerTable(0).head(Head1.class).registerWriteHandl…

iphone怎么删除重复的照片的新策略

Phone用户常常面临存储空间不足的问题&#xff0c;其中一个主要原因是相册中的重复照片。这些重复项不仅占用了大量的存储空间&#xff0c;还会影响设备的整体性能。本文将向您展示iphone怎么删除重复的照片的方法&#xff0c;包括一些利用工具来自动化这个过程的创新方法。 识…

AI4SCIENSE(鄂维南院士:再谈AI for Science)

鄂维南院士&#xff1a;再谈AI for Science_哔哩哔哩_bilibili 以往处理高维问题 量子力学&#xff1a;单变量乘积 统计学&#xff1a;旋转 AI4S 处理数据 蛋白质折叠&#xff1f; 不是纯粹的数据驱动 物理学等学科基本原理 例&#xff1a;分子动力学 数据模型 流程图 这…

learn C++ NO.31——类型转换

C语言中的类型转换 在C语言中&#xff0c;当赋值符号两边的类型不匹配的时候&#xff0c;或者是形参类型和实参类型不匹配时&#xff0c;返回值类型与接受返回值类型不匹配时&#xff0c;都会需要类型转换。C语言的类型转换有两种&#xff1a;显示类型转换和隐式类型转换。 显…

基于Spring Boot的养老保险管理系统的设计与实现,LW+源码+讲解

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统养老保险管理系统信息管理难度大&#xff0c;容错率低&a…

w029基于springboot的网上购物商城系统研发

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0…

Unet++改进8:添加SpatialGroupEnhance||空间群智能增强:改进卷积网络中的语义特征学习

本文内容:添加SpatialGroupEnhance 论文简介 卷积神经网络(Convolutional Neural Networks, cnn)通过收集分层的、不同部分的语义子特征来生成复杂对象的特征表示。这些子特征通常以分组的形式分布在每一层的特征向量中[43,32],代表各种语义实体。然而,这些子特征的激活往往…