Rollup 简易入门示例教程

 更新时间:2023年02月20日 11:54:03   作者:超神熊猫  
这篇文章主要为大家介绍了Rollup 简易入门示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

Rollup介绍及使用

1、Rollup 概述

  • 仅仅是 ES Module 的打包器
  • Rollup 与 Webpack 作用类似,相比于Webpack,Rollup更为小巧
  • Rollup 中并不支持类似 HRM 特性

初衷:提供一个充分利用ESM(ES Module)各项特性的高效打包器

2、Rollup 快速上手

安装:yarn add rolluo --dev
用法:
    yarn rollup  //不传递任何参数的情况下,打印Rollup的帮助信息
    yarn rollup ./src/index.js --format iife //执行index.js文件并以iife(自调用函数)的方式输出(--format指定输出格式)
    yarn rollup ./src/index.js --format iife --file dist/bundle.js //输出文件到dist/bundle.js
默认开启chunk去掉多余代码,优化输出结果

3、Rollup 配置文件

rollup.config.js

export default {
input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    }
}

4、Rollup 使用插件

插件是Rollup的扩展途径

rollup.config.js

5、Rollup 加载 NPM 模块

Rollup默认只能根据文件路径加载本地的文件模块,第三方模块不能直接通过模块名称去导入

rollup-plugin-node-resolve:安装后Rollup可直接通过模块名称导入模块
安装:yarn add rollup-plugin-node-resolve --dev

rollup.config.js

import resolvefrom 'rollup-plugin-node-resolve'
export default {
input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
format: 'iife'
    },
    plugins: [
        resolve()
    ]
}

6、Rollup 加载 CommonJS 模块

rollup-plugin-commonjs:因为Rollup默认只能处理ESM模块,使用这个插件Rollup就可以处理CommonJS

安装:yarn add rollup-plugin-commonjs --dev

rollup.config.js

import commonjsfrom 'rollup-plugin-commonjs'
export default {
input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
format: 'iife'
    },
    plugins: [
        commonjs()
    ]
}

7、Rollup 代码拆分

运行:yarn rollup

index.js

import('./logger').then(({ log }) => {
    log('code splitting~')
})

rollup.config.js

export default {
	input: 'src/index.js',
	  output: {
	      dir: 'dist',
	      format: 'amd'
  }
}

8、Rollup 多入口打包

多入口打包内部会自动提取公共模块,也就是说内部会使用代码拆分

rollup.config.js

方式1:

export default {
input: ['src/index.js', 'src/album.js'],
    output: {
        dir: 'dist',
        format: 'amd'
    }
}

方式2:

export default {
input: {
        foo: 'src/index.js',
        bar: 'src/album.js'
    },
output: {
dir: 'dist',
        format: 'amd'
    }
}

9、Rollup 选用原则

Rollup优势:
    输出结果更加扁平(执行效率更高)
    自动移除未引用的代码
    打包结果依然完全可读(和手写代码一致)

Rollup缺点:
    加载非ESM的第三方模块比较复杂(需要配置一大堆插件)
    模块最终都被打包到一个函数中,无法实现HMR
    浏览器环境中,代码拆分功能依赖AMD库

选用:
    开发应用程序    选用Webpack,大而全
    开发框架或类库  选用Rollup,小而美

10、Parcel

零配置的前端应用打包器

安装:

yarn add parcel-bundler --dev 

运行:

yarn parcel src/index.html 
//index.html为入口文件 

优势:
支持自动安装依赖 支持动态导入 相同体量下,Parcel比Webpack打包要快,因为Parcel使用的是多进程同时工作,充分发挥了多核CPU的性能(Webpack也可以使用happypack插件实现多进程)

以上就是Rollup 简易入门示例教程的详细内容,更多关于Rollup 入门教程的资料请关注程序员之家其它相关文章!

相关文章

  • TypeScript手写一个简单的eslint插件实例

    TypeScript手写一个简单的eslint插件实例

    这篇文章主要为大家介绍了TypeScript手写一个简单的eslint插件实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Typescript tsconfig.json的配置详情

    Typescript tsconfig.json的配置详情

    这篇文章主要为大家介绍了Typescript tsconfig.json的配置详情示例 ,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • ThreeJS使用纹理贴图创建一个我的世界草地方块

    ThreeJS使用纹理贴图创建一个我的世界草地方块

    这篇文章主要为大家介绍了ThreeJS使用纹理贴图创建一个我的世界草地方块的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • TypeScript与JavaScript的区别分析

    TypeScript与JavaScript的区别分析

    TypeScript可以使用JavaScript中的所有代码和编程概念,TypeScript是为了使JavaScript的开发变得更加容易而创建的。推荐先精通JS的的前提下再学习TS,这样更有利于同时学习两门语言。
    2022-12-12
  • TypeScript Nim交替使用细节分析

    TypeScript Nim交替使用细节分析

    这篇文章主要为大家介绍了TypeScript Nim交替使用细节分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • TypeScript交叉运算的算法示例解析

    TypeScript交叉运算的算法示例解析

    这篇文章主要为大家介绍了TypeScript交叉运算的算法示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • TypeScript中的联合类型使用示例详解

    TypeScript中的联合类型使用示例详解

    这篇文章主要为大家介绍了TypeScript中的联合类型使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 与ChatGPT结对编程实现代码详解

    与ChatGPT结对编程实现代码详解

    这篇文章主要为大家介绍了与ChatGPT结对编写实现代码详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Rollup 简易入门示例教程

    Rollup 简易入门示例教程

    这篇文章主要为大家介绍了Rollup 简易入门示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • xterm.js在web端实现Terminal示例详解

    xterm.js在web端实现Terminal示例详解

    这篇文章主要为大家介绍了xterm.js在web端实现Terminal示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论

?


http://www.vxiaotou.com