Rollup&Parcel

最新推荐文章于 2023-11-01 18:50:25 发布

小项岗

最新推荐文章于 2023-11-01 18:50:25 发布

阅读量146

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_38550182/article/details/113484804

版权

笔记专栏收录该内容

47 篇文章 1 订阅

订阅专栏

Rollup

1、概述
2、快速上手
3、配置文件
4、使用插件
5、加载npm模块
6、加载CommonJS模块
7、代码拆分
8、多入口打包
8、Rollup/Webpack选用原则
9、Parcel

1、概述

Rollup也是一款ES Modules的打包器，也可以将项目中散落的细角模块打包成整块的代码，从而使这些划分的模块可以更好地运行在浏览器环境或者是NodeJS环境。
Rollup与Webpack作业类似。Rollup更为小巧，仅仅是一款ESM打包器，没有其它额外的功能。
Rollup中并不支持类似HMR这种高级特性。
初衷只是希望提供一个充分利用ESM各项特性的高效打包器，构建出结构比较扁平，性能比较出众的类库

2、快速上手

yarn add rollup --dev 安装过后rollup这个模块就会在node_modules中bin目录里面提供一个cli程序
yarn可以自动找到node_modules下的cli程序，避免手动通过路径查找对应的cli
在这里插入图片描述
指定打包入口文件
–format指定代码输出格式，这边是自调用函数的格式
–file指定输出文件的路径
yarn rollup ./src/index.js --format iife --file dist/bundle.js

打包结果特别简洁，并且只保留用到的代码。默认会用到Tree Shaking 最早也是在该工具中提出

3、配置文件

// rollup.config.js 这个配置文件同样运行在node环境当中，不过rollup自身会额外处理这个配置文件，所以这里可以直接使用ESModules

export default {
  input: 'src/index.js', // 指定打包入口文件
  output: {
    file: 'dist/bundle.js', // 指定输出文件名
    format: 'iife' // 指定输出格式
  }
}

需要–config 这个参数用来表明这儿使用项目中的配置文件。默认不会读取配置文件，必须要使用这样一个参数
yarn rollup --config
也可以通过这样一个参数指定不同配置文件的名称
yarn rollup --config rollup.config.js 以此可以新建开发生产环境配置文件rollup.development.js等

4、使用插件

Rollup自身的功能只是ES Modules模块的合并打包
如果有更高级的需求如加载其它类型资源模块、导入CommonJS模块、编译ECMAScript新特性等。这些额外的需求，Rolup同样支持使用插件的方式扩展。插件是Rollup唯一扩展途径，不像webpack中有loader、plugins、minimize三种扩展方式。
尝试代码中导入JSON文件的插件。rollup-plugin-json
yarn add rollup-plugin-json --dev
// webpack.config.js

import json from 'rollup-plugin-json'
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json() //函数调用结果放到数组当中
  ]
}

5、加载npm模块

rollup默认只能够按照文件路径的方式加载本地文件模块
对于node_modules下面的第三方的模块并不能够像webpack一样直接去通过模块的名称去导入对应的模块。rollup官方给出了一个rollup-plugin-node-resolve插件，通过这个插件就可以直接在代码当中直接去使用模块名称导入对应的模块了
yarn add rollup-plugin-node-resolve --dev

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

yarn add lodash-es

// index.js
// 导入模块成员
import _ from 'lodash-es' // lodash模块的ES Modules版本
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'
// 使用模块成员
const msg = messages.hi
log(msg)
log(name)
log(version)
log(_.camelCase('hello world'))

yarn rollup --config 这样lodash-es代码就被打包进去了

6、加载CommonJS模块

Rollup自身的功能只是ES Modules模块的合并打包，如果代码中导入commonjs模块时不支持的
兼容目前还有大量 npm模块使用commonjs方式导出成员的问题
yarn add rollup-plugin-commonjs --dev

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}

在这里插入图片描述

7、代码拆分

动态导入rollup内部自动处理代码的拆分（分包）
format不是能iife，因为自执行函数会把所有模块放到同一个函数中，没有像webpack一样有一些引导代码，所以说它没有办法实现代码拆分
dir是因为需要输出多个文件,不能用file的形式
在这里插入图片描述

8、多入口打包

多入口打包内部会自动提取公共模块，也就是说内部会使用代码拆分，所以不能用iife这种输出格式了
注意：对于amd这种输出文件的js格式，不能直接去引用到页面上，需要要通过实现amd标砖的库加载

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

// dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- AMD 标准格式的输出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
  <!-- 需要 Require.js 这样的库 -->
  <!-- data-main指定require加载的这个模块的入口模块的路径 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
</body>
</html>

8、Rollup/Webpack选用原则

优点
Rollup输出结果更加扁平，执行效率更高
自动移除未引用代码
打包结果依然完全可读
缺点
加载非 ESM 的第三方模块比较复杂
模块最终都被打包到一个函数中，无法实现 HMR
浏览器环境中，代码拆分功能依赖AMD库

大多数知名框架/库都在使用 Rollup
应用开发使用 Webpack
库/框架开发使用 Rollup

9、Parcel

2017年发布，因为当时的Webpack使用上过于繁琐完全0配置，自动安装依赖
构建速度更快
零配置的前端应该打包器
yarn init -y
yarn add parcel-bundler --dev
Parcel 同样支持对ESModules模块的打包
// 这边需要传入打包入口文件的路径
yarn parcel src/index.html 支持自动开启服务于热替换
支持自动安装依赖

生产环境的打包
yarn parcel build src/index.html 即可
Parcel构建速度比webpack快很多，因为内部使用了多进程同时工作，充分发挥了多核CPU的性能。webpack中可以happypack插件实现这一点
在这里插入图片描述
webpack生态更好，问题容易解决
Webpack越来越好用

小项岗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Rollup&Parcel

Rollup1、概述2、快速上手3、配置文件4、使用插件5、加载npm模块6、加载CommonJS模块7、代码拆分8、多入口打包8、Rollup/Webpack选用原则9、Parcel1、概述Rollup也是一款ES Modules的打包器，也可以将项目中散落的细角模块打包成整块的代码，从而使这些划分的模块可以更好地运行在浏览器环境或者是NodeJS环境。Rollup与Webpack作业类似。Rollup更为小巧，仅仅是一款ESM打包器，没有其它额外的功能。Rollup中并不支持类似HMR这种高级特
复制链接

扫一扫