• rollup的使用


    认识rollup

    1. 我们来看一下官方对rollup的定义:
    2. 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.
    3. Rollup是一个JavaScript的模块化打包工具,可以帮助我们编译小的代码到一个大的、复杂的代码中,比如一个库或者一个应用程序;
    4. 我们会发现Rollup的定义、定位和webpack非常的相似:
    5. Rollup也是一个模块化的打包工具,但是Rollup主要是针对ES Module进行打包的;
    6. 另外webpack通常可以通过各种loader处理各种各样的文件,以及处理它们的依赖关系;
    7. rollup更多时候是专注于处理JavaScript代码的(当然也可以处理css、font、vue等文件);
    8. 另外rollup的配置和理念相对于webpack来说,更加的简洁和容易理解;
    9. 在早期webpack不支持tree shaking时,rollup具备更强的优势;
    10. 目前webpack和rollup分别应用在什么场景呢?
    11. 通常在实际项目开发过程中,我们都会使用webpack(比如vue、react、angular项目都是基于webpack的);
    12. 在对库文件进行打包时,我们通常会使用rollup(比如vue、react、dayjs源码本身都是基于rollup的);

    Rollup基本使用

    1. 我们可以先安装rollup:在这里插入图片描述

    2. 创建main.js文件,打包到bundle.js文件中: 在这里插入图片描述

    Rollup的配置文件

    1. 我们可以将配置信息写到配置文件中rollup.config.js文件:在这里插入图片描述

    2. 我们可以对文件进行分别打包,打包出更多的库文件(用户可以根据不同的需求来引入):在这里插入图片描述

    解决commonjs和第三方库问题

    1. 安装解决commonjs的库:
    2. npm install @rollup/plugin-commonjs -D
    3. 安装解决node_modules的库:
    4. npm install @rollup/plugin-node-resolve -D
    5. 打包和排除lodash在这里插入图片描述

    Babel转换代码

    1. 如果我们希望将ES6转成ES5的代码,可以在rollup中使用babel。
    2. 安装rollup对应的babel插件:
    3. npm install @rollup/plugin-babel -D
    4. 修改配置文件:
    5. 注意:babel的位置应该是在commonjs的前面的;
    6. 需要配置babel.config.js文件;在这里插入图片描述

    Teser代码压缩

    1. 如果我们希望对代码进行压缩,可以使用rollup-plugin-terser:
    2. npm install rollup-plugin-terser -D
    3. 配置terser:在这里插入图片描述

    处理css文件

    1. 如果我们项目中需要处理css文件,可以使用postcss:
    2. npm install rollup-plugin-postcss postcss -D
    3. 配置postcss的插件:在这里插入图片描述

    处理vue文件

    1. 处理vue文件我们需要使用rollup-plugin-vue插件:
    2. 但是注意:默认情况下我们安装的是vue2.x的版本,所以我这里指定了一下rollup-plugin-vue的版本;
    3. npm install rollup-plugin-vue@4.6.1 vue-template-compiler -D
    4. 使用vue的插件:在这里插入图片描述

    打包vue报错

    1. 在我们打包vue项目后,运行会报如下的错误:
    2. 在这里插入图片描述
    3. 这是因为在我们打包的vue代码中,用到 process.env.NODE_ENV,所以我们可以使用一个插件 rollup-pluginreplace 设置它对应的值:npm install rollup-plugin-replace -D
    4. 配置插件信息:在这里插入图片描述

    搭建本地服务器

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

    2. npm install rollup-plugin-serve -D

    3. 在这里插入图片描述

    4. 第二步:当文件发生变化时,自动刷新浏览器npm install rollup-plugin-livereload -D在这里插入图片描述

    5. 第三步:启动时,开启文件监听npx rollup -c -w

    区分开发环境

    1. 我们可以在package.json中创建一个开发和构建的脚本:
    2. 在这里插入图片描述
    3. 在这里插入图片描述
  • 相关阅读:
    区别:千赫kHz、兆赫MHz、吉赫GHz、太赫THz、拍赫PHz、艾赫EHz每两级之间的换算以及之间的关系
    抖音短视频实操:矩阵号之为什么要做矩阵号和如何做矩阵号(下)
    一款集成ST-link下载及虚拟串口的STM32F103C8T6最小系统板设计
    如何实现ElementUI动态表头?
    深圳NPDP认证|如何做好一个B端产品经理?
    Meta与微软达成合作:是合作共赢,还是零和博弈?
    【Linux】基本指令(三)
    统一身份认证实现,推广的可能性及优缺点?
    2024/3/11打卡管道(14届蓝桥杯省赛)——二分+区间合并
    使用Python实现对word的批量操作
  • 原文地址:https://blog.csdn.net/formylovetm/article/details/126500166