Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别

这篇具有很好参考价值的文章主要介绍了Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前置知识

没接触过前端模块化概念的同学可先参考:JS & Node 模块化解释:AMD、UMD、CommonJS、 ESM

二、什么是 Rollup ?

Rollup 工具可以将代码转成不同模块,实现一套代码多端(浏览器/Node)引入。比如通过一句命令将代码打包为:

  1. 浏览器(代码通过 Script 标签引入)
rollup main.js --file bundle.js --format iife
  1. AMD(兼容 requirejs.js 框架)
rollup main.js --file bundle.js --format amd
  1. CommonJS(Node.js 代码通过 CJS 方式引入)
rollup main.js --file bundle.js --format cjs
  1. UMD (浏览器、AMD、CJS 均支持,是目前最常见的模块选择方式)
rollup main.js --file bundle.js --format umd --name "myBundle"

后面会提到每个命令的作用,这里了解即可。

三、Rollup 的应用场景和好处

  1. 如果你的项目是以插件或库给用户引入使用,Rollup 是最佳选择,它可以将代码转成不同的模块,然后用户根据自身项目模块语法来引入你的代码。

  2. Rollup 支持 Tree-shaking ,只打包引用代码,无引用的一律甩掉。

  3. 你的项目可以肆无忌惮地使用 ESM 写法,Rollup 将会自动编译,再结合 Babel 美滋滋。

四、Rollup 与 Webpack/Vite 的区别

  1. Rollup 将 JS 代码转成不同的引入模块形式,如果要处理其它语言需要借助插件。

  2. Webpack 将 JS 代码进行打包压缩,同时拥有着 CSS/JS/HTML/Font 等其它语言插件的生态丰富圈。

  3. 组件库或插件适合用 Rollup 打包、大型项目适合用 Webpack 或 Vite 。

五、Rollup 与 Babel 的区别

  1. Rollup 可将 JS 代码变成多种模块来引入运行。

  2. Babel 可将高级 JS 语法代码转成低级版本兼容运行。

六、Rollup 使用教程

6.1 准备工作

  1. 新建项目: rollup-example

  2. 项目结构:
    Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别,前端工具,JavaScript,前端,rollup,Web 模块化

  3. src/main.js 代码:

    const user = () => {
      return {
        name: 'Jack'
      }
    }
    export { user };
    
  4. 全局安装 Rollup:

    npm install rollup -g
    

6.2 使用命令行

6.2.1 使用 CLI 打包

rollup ./src/main.js --file lib.js --format cjs 

解释:

  1. ./src/main.js 是目标即入口文件。
  2. --file lib.js 是输出的产物文件名。
  3. --format cjs 是需要转换的模块格式,这里我们采用 CJS,表示只用于 Node.js

打包后的产物:
Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别,前端工具,JavaScript,前端,rollup,Web 模块化

6.2.2 参数命令说明

-o === --file === output 输出产物的文件名。
-d === --dir === 输出产物的目录名,一般在开启 code spliting 代码分割技术后才用到。
-f === --format === 打包模块格式。
-w === --watch === 启动监听模式,当项目代码有变动时,自动执行打包命令。
-c === --config === rollup.config.js 指向配置文件。

其它参数命令可参考官方文档。

6.3 使用配置文件

当频繁使用打包命令且参数量越来越多时,Rollup 支持配置文件的方式,例如:

// rollup.config.js
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
export default {
	input: 'src/main.js', // 目标入口
	// 同一个目标入口可以编译多种产物形式。
	output: [
		{
			file: 'bundle.js', // 产物文件名。
			format: 'cjs', // 产物模块格式。
			
		},
		{
			file: 'bundle.min.js',
			format: 'iife',
			// output-plugin(构建完成后的插件):
			// 做一些收尾工作,比如 terser 插件可将代码变量/函数名全部压缩转义为 a,b,c,d 的精简版本形式,俗称“混淆”,防止外部人员窥探源码。
			plugins: [terser()] 
		}
	],
	// compliling-plulgin(rollup 执行编译时的插件): 
	// 帮助我们在写代码的过程中享受一些特殊语法糖和特殊处理。
	plugins: [
		// 支持识别 import json 数据。
		json(),
		// 支持 Babel (记得要在 babel.config.js 中配置下 preset )
		resolve(),
		babel({ babelHelpers: 'bundled' })
	],
	// 告诉哪个 NPM 模块打包过程种直接全量 import,不采用 tree-shaking 。
	external: ['lodash']
};

最后执行 rollup -c 即可,更多配置选项可参考官方文档 。

提示:命令行参数的优先级比配置选项更高。

七、Rollup 支持打包 Vue 模板 或 Vue TSX

构建一个组件库时,通常需要借助框架来快速完成,比如我想构建一套 Vue 语法的组件库,能够给其它 Vue 项目引入使用。接下来我将以 Vue3 的两种写法来作为演示。

7.1 准备工作

  1. 新建 rollup-vue-example 项目并使用 npm init -y 初始化。

  2. 项目结构如下:
    Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别,前端工具,JavaScript,前端,rollup,Web 模块化

  3. 为了使项目全面支持 ESM 模块语法,在 package.json 中新增:"type": "module",以便本地运行项目时 node 不会报错。

  4. main.js 入口代码如下:

    import Vue from 'vue';
    import App from './src/App.vue';
    
    new Vue({
      render: (h) => h(App),
    }).$mount('#app');
    
  5. src/App.vue 代码如下

    <template>
      <div>Hello,world</div>
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue';
    
    export default defineComponent({
      setup(props) {
        return {}
      }
    })
    </script>
    <style lang="scss" scoped>
    </style>
    
  6. rollup.config.js 配置文件如下:

    export default {
      input: 'main.js',
      output: {
        file: 'dist/index.js',
        format: 'esm',
      },
      plugins: [],
    };
    

7.2 打包 Vue 模板

要想让 Rollup 识别 .vue 文件,得分几个步骤完成:

7.2.1 安装以下两个插件:

npm i rollup-plugin-vue @vue/compiler-sfc

其中 rollup-plugin-vue 是我们想要的插件,@vue/compiler-sfc 是 rollup-plugin-vue 需要的依赖(后面会讲它的用处)。

7.2.2 调整 rollup.config.js 配置:

import vue from 'rollup-plugin-vue';
export default {
  input: 'main.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    vue({
      css: true, // 提取 css 为单个文件。
      compileTemplate: true, // 编译 vue 模板。
    })
  ],
};

7.2.3 执行:

rollup -c

编译后的 dist/index.js 产物如下:
Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别,前端工具,JavaScript,前端,rollup,Web 模块化

你可能会问,为什么 .vue 源码会被编译,而不像 js 代码那样原封不动的输出?

这是因为 .vue 语法本身就不能直接在浏览器或 node 上面跑,于是刚刚的 @vue/compiler-sfc 依赖就排上用场了,它可以识别 .vue 文件并编译成可执行的 JS 对象代码。

不信可以在产物里找找看哪个不是 JS 能识别的,若能找到;我请你喝可口可乐。

你可能还会问,那为啥本地项目就能跑起 vue 模板的代码呢?这是因为编译期间,如 vue-cli or vite 偷偷将它们转为可执行的 JS 脚本,只是我们没感知到而已~

7.3 打包 Vue JSX

Vue3 除了语法上发生了变化,它还支持 JSX 写法,我们又不得不继续卷到底!
与 Vue 模板相比,Rollup 支持 Vue JSX 需要多点配置量,但问题不大。

7.3.1 准备工作

我们继续沿用刚刚的 rollup-vue-example 项目来作为演示,这里稍微改动下即可:

  1. 新增 src/App.tsx 文件,内容如下:
import { defineComponent } from 'vue';
const App = defineComponent({
  setup() {
    const Greet = () => <div>Hello,world</div>
    return <Greet />
  }
});
export default App
  1. 改变 main. 引入文件方式:
import Vue from 'vue';
import App from './src/App.tsx'; // 引入 tsx 。
new Vue({
  render: (h) => h(App),
}).$mount('#app');

7.3.2 安装依赖包:

npm i @rollup/plugin-babel @babel/core @vue/babel-preset-jsx

解释:

  • @rollup/plugin-babel 能够让 Rollup 支持 Babel
  • @babel/core 引入 babel 的核心编译包。
  • @vue/babel-preset-jsx Vue 自家实现的 Vue JSX babel 插件 。

Babel 概念不熟的可以阅读前面写过的 JS & 介绍 Babel 的使用及 presets & plugins 的概念

7.3.2 调整 rollup.config.js 配置:

import vue from 'rollup-plugin-vue';
// 新增
import { babel } from '@rollup/plugin-babel';
export default {
  input: 'main.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    vue({
      css: true, // 提取 css 为单个文件。
      compileTemplate: true, // 编译 vue 目标。
    }),
    // 新增
    babel({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      presets: ['@vue/babel-preset-jsx'], // 让 babel 加载 Vue JSX babel 插件。
    })
  ],
};

7.3.3 执行:

roolup -c

编译后的 dist/index.js 产物如下:
Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别,前端工具,JavaScript,前端,rollup,Web 模块化
你可能会问,.tsx 采用的就是 JS 语法呀,产物为什么也会发生变化呢?
错!!!TSX 不是 JS,它们是 JS + HTML 的混合体,看看里面的标签便知,浏览器是无法执行这段代码的,依然需要转成可执行的JS 对象。

八、Rollup 常用插件集合

========compiling plugin=========

@rollup/plugin-commonjs 支持在 ESM 中引入 CJS代码。

@rollup/plugin-typescript 支持识别 .ts 文件。

@rollup/plugin-json 能够导入 import .json 文件。

@rollup/plugin-babel 支持 Babel

@rollup/plugin-node-resolve 提供更全面的路径解析

========output plugin=========
@rollup/plugin-terser 将代码变量混淆,转成 a,b,c,d, …的形式。

查看更多插件

----------------------------------------------------------------结尾----------------------------------------------------------------

参考文献:
https://rollup-plugin-vue.vuejs.org/#what-does-rollup-plugin-vue-do
https://rollupjs.org/introduction/
https://rollupjs.org/tutorial/
https://adostes.medium.com/authoring-a-javascript-library-that-works-everywhere-using-rollup-f1b4b527b2a9文章来源地址https://www.toymoban.com/news/detail-571700.html

到了这里,关于Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack、rollup、parcel 优势和劣势?

    结论先行: webpack 是 模块化构建工具,具有强大的 loader 和插件生态,适用于大型复杂项目的构建 ; rollup 适用于基础库的打包,功能没有webpack 强大 ; parcel 适用于简单的实验性项目,在公司真实项目一般不用 ; 1、Webpack webpack 适用于大型复杂的前端站点构建 ; webpack 具有

    2024年02月05日
    浏览(50)
  • 构建工具 Vite、Webpack、Rollup对比

    热更新方面:webpack支持HMR,但是webpack需要全部重新编译并更新,效率较低 tree-shaking:webpack2开始支持且消除效果不好,但是webpack5有更好的tree-shaking(去除未使用代码) 分包方面:webpack支持代码切割。(分包) ESM打包:现在webpack支持es6module输出 优点: Rollup 是一款 ES Mod

    2024年02月09日
    浏览(38)
  • Node.JS学习 | Babel | webpack | ES6

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Node.JS能够在服务器端运行JavaScript的开放源代码、跨平台运行环境;Node.js采用Google开发的V8运行代码,使用事件驱动、非阻塞IO和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模 let有效避免var的变

    2024年02月07日
    浏览(41)
  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(54)
  • 前端面试:【前端工程化】构建工具Webpack、Parcel和Rollup

    嗨,亲爱的前端开发者!在现代Web开发中,前端工程化变得愈发重要。构建工具如Webpack、Parcel和Rollup帮助我们自动化任务、管理依赖、优化性能等。本文将深入探讨这三个前端构建工具,帮助你了解它们的优点和用途。 1. Webpack: 用途: Webpack是一个强大的模块打包工具。它

    2024年02月11日
    浏览(45)
  • Webpack5 core-js和babel-loader区别和用法

    core-js是一个流行的JavaScript库,它提供了对新的JavaScript特性、API和方法的兼容性支持。它通过模拟缺失的功能,并提供 polyfill 来使这些功能可以在旧版浏览器中正常运行 polyfill 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,

    2024年02月13日
    浏览(39)
  • 使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板

    最近使用 pnpm + Monorepo + rollup 开源了一个工具库 tojson.js tojson.js 是一个支持解析 Psd、Sketch 转 json 的类库, 该 json 满足 fabric.js 画布渲染的数据格式. 后期也会增加 ppt、pdf 格式 为什么要使用 pnpm + Monorepo ? 不止开源了一个工具库 tojson.js, 也开源了 sketchtojson, pst-json.js 库, tojson.j

    2024年01月20日
    浏览(39)
  • webpack原理之手写babel-loader,将es6以上语法转换为低版本语法

    一、手写babel-loader 一个基于webpack的简单的loader,将es6以上版本的语法转换成低版本语法的步骤如下: 1. 创建一个名为 es6-to-es5-loader 的文件夹,进入该文件夹。 2. 在该文件夹中创建一个名为 index.js 的文件。该文件是我们自定义的loader。再创建一个 schema.json 文件,用于定义配

    2024年02月11日
    浏览(39)
  • webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js)

    webpack打包的时候报错,报错信息如下: ERROR in ./static/js/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: this.getOptions is not a function 报错原因 :使用了高版本的babel-loader,导致babel-loader和babel-core版本冲突,我降低之前babel-loader为9版本 解决办法 :降低babel

    2024年02月12日
    浏览(47)
  • 前端构建工具 代码优化压缩 模块管理 依赖管理 资源处理转换 自动化任务 流程优化 高级特性 Webpack Parcel Rollup Gulp 静态资源

    前端构建在前端开发中具有重要的意义,主要有以下几个方面: 代码优化和压缩:前端构建工具可以对前端代码进行优化和压缩,例如去除注释、空格,合并和缩小文件大小等。这可以减少文件的加载时间和传输大小,提高网页加载速度,优化用户体验 模块管理和依赖管理

    2024年02月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包