rollup函数_Vue3同款打包工具Rollup常用配置
Rollup的优势
在最新的Vue3版本中,也使用了rollup作为打包工具。相比于webpack,rollup要轻量许多,用于弥补gulp的无tree-shaking是很好的选择,最大的用途是打包生产一个库文件,比如sdk.js之类。虽然webpack也可以做到,但是webpack较重,打包后的文件有部分webpack内部代码,如__webpack__require之类的函数定义,给人一种不干净的感觉。而rollup打出来的包就很干净,没有其他冗余代码。
使用方法
一、安装rollup
npm i rollup -g
二、几种使用方式
1、命令行运行
rollup src/main.js -o rel/bundle.js -f cjs //将main.js(es5)编译输出至bundle.js(commonjs)
2、配置文件形式
//新建一个rollup.config.js export default { input: 'src/main.js', // 入口文件 output: { // 输出 options file: 'bundle.js', // 输出文件名 format: 'cjs' // 输出格式 }}//执行rollup -c //当你的配置文件另有其名(dev),执行 rollup -c rollup.config.dev.js
3、模块形式(方便配合gulp等其他工具)
//rollup.config.js var rollup = require( 'rollup' );var babel = require('rollup-plugin-babel');rollup.rollup({ entry: 'src/main.js', plugins: [ babel() ]}).then( function ( bundle ) { bundle.write({ format: 'umd', moduleName: 'main', //umd或iife模式下,若入口文件含 export,必须加上该属性 dest: 'rel/bundle.js' });});//命令行执行node rollup.config.js
相关配置说明
一、input
入口文件地址
二、output
output:{ file:'bundle.js', // 输出文件 format: 'cjs, // 五种输出格式:amd / es6 / iife / umd / cjs name:'A', //当format为iife和umd时必须提供,将作为全局变量挂在window(浏览器环境)下:window.A=... sourcemap:true //生成bundle.map.js文件,方便调试}
三、plugins
最常用的就是babel插件了,比较不爽的是,babel 的预设不像 webpack 可以直接写在配置文件里,而还是得独立写个“src/.babelrc”(注意我们可以写在 src 下,而不是非得放在项目根目录下),还得确保装了插件:npm i rollup-plugin-babel
//rollup.config.js import babel from 'rollup-plugin-babel';export default { input: 'src/main.js', output: { file: 'bundle.js', format: 'cjs' }, plugins: [ // 增加 plugins babel({ exclude: 'node_modules/**' // 不对node_modules进行编译 }) ]}//.babelrc{ "presets": [ ["@babel/env", {"modules": false}] ]}
四、external
external: ['react', 'redux'],// 告诉rollup,不打包react,redux;将其视为外部依赖
五、global
globals: { react: 'React', // 这跟external 是配套使用的,指明global.React即是外部依赖react redux: 'Redux'}
主要依赖包
rollup无法识别node_modules中的包,需要安装插件rollup-plugin-node-resolve,然后在plugins中使用。
node_modules中的包大部分都是commonjs格式的,要在rollup中使用必须先转为ES6语法,为此需要安装插件 rollup-plugin-commonjs。
附一份react-redux开源项目的rollup配置文件
import nodeResolve from 'rollup-plugin-node-resolve' // 帮助寻找node_modules里的包import babel from 'rollup-plugin-babel' // rollup 的 babel 插件,ES6转ES5import replace from 'rollup-plugin-replace' // 替换待打包文件里的一些变量,如 process在浏览器端是不存在的,需要被替换import commonjs from 'rollup-plugin-commonjs' // 将非ES6语法的包转为ES6可用import uglify from 'rollup-plugin-uglify' // 压缩包const env = process.env.NODE_ENVconst config = { input: 'src/index.js', external: ['react', 'redux'], // 告诉rollup,不打包react,redux;将其视为外部依赖 output: { format: 'umd', // 输出 UMD格式,各种模块规范通用 name: 'ReactRedux', // 打包后的全局变量,如浏览器端 window.ReactRedux globals: { react: 'React', // 这跟external 是配套使用的,指明global.React即是外部依赖react redux: 'Redux' } }, plugins: [ nodeResolve(), babel({ exclude: '**/node_modules/**' }), replace({ 'process.env.NODE_ENV': JSON.stringify(env) }), commonjs() ]}if (env === 'production') { config.plugins.push( uglify({ compress: { pure_getters: true, unsafe: true, unsafe_comps: true, warnings: false } }) )}export default config
rollup函数_Vue3同款打包工具Rollup常用配置相关推荐
- JS打包工具rollup——完全入门指南
因项目需要,最近一直在研究前端打包技术,参照以下文章及rollup官网,通过亲手操练,对rollup有了初步的了解.看到一篇不错的文章,转载记录.感谢作者的无私分享. 原文链接地址:https://s ...
- 前端打包工具rollup、webpack、vite的区别
前端打包工具rollup.webpack.vite的区别 文章目录 前端打包工具rollup.webpack.vite的区别 一.结论 二.rollup 三.webpack 1. 核心概念 2. 重要 ...
- 【前端工程化】四:打包工具Rollup快速上手和Parcel的使用
Rollup 相比于webpack,rollup要小巧的多,它仅仅是一款ES Module打包器,并不支持例如HMR等特性,它的初衷是提供一个充分利用ESM各项特性的高效打包器: Rollup快速上手 ...
- 原创全新打包工具Parcel零配置VueJS开发脚手架
parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/p... 初 ...
- 利用Python3开发一款小工具(环境配置)
前面一篇文章对开发的小工具的需求进行了分析,已经大致清楚了我们需要使用的工具,本文将逐个工具进行安装配置,主要包括: 1.python36安装 2.pycharm安装 3.pyqt5与pyqt5-to ...
- 打包工具-rollup
- Python 官方推荐的一款打包工具
在thoughtbot,我们用Ruby和Rails工作,但通常我们总是尝试使用最合适的语言或者框架来解决问题.我最近一直在探索机器学习技术,所以Python使用地更多. Ruby项目和Python项目 ...
- mysql rollup函数_Mysql,Oracle使用rollup函数完成行列统计
昨天突然在 一篇博客中看到了Mysql也有rollup函数,原博文使用了rollup进行行列统计,原博文链接如下: 本博文主要是记录下mysql和oracle使用rollup函数进行行列统计,内容比较 ...
- Webpack实战(一):基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
最新文章
- 【微信小程序企业级开发教程】如何搭建服务器(tomcat)后台
- ActiveMQ(为什么要使用消息中间件,JMS传输模型)
- ios NSFileManager 用法详解
- 关于sscanf与结构体不能联用的问题
- 不用临时变量交换两个变量的值
- 与 Rust 社区亲密接触!Rust 大会火热报名!
- at24c16如何划分出多个读写区_漫话:如何给女朋友解释为什么Windows上面的软件都想把自己安装在C盘...
- ACL2021 | OntoED:利用本体表示学习实现低资源的事件抽取
- 如何基于云通讯构建企业移动信息化竞争力
- reset.css下载
- ISO常见的17大体系介绍
- Urlrewrite地址重写
- 实时数仓-数据采集层_1
- jenkins下载及安装
- Linux(Ubuntu)系统查看显卡型号
- 约瑟夫问题 pku1012(转自奋斗青春(亚伟)blog)
- linux将文件修改时间改为现在
- Ubuntu 安装 php8.1
- 【openh264】编码器 编码 SPS NALU 的流程
- CMMI3级中18个过程域包含关系及目的(整理)
热门文章
- JeecgBoot 常见问题QA
- 【JEECG_3.7.1】Online树控件的使用
- 基于SpringCloud实现Shard-Jdbc的分库分表模式,数据库扩容方案
- Linux基础命令---ab测试apache性能
- 项目研发流程及管理之我见
- 201521123087 蒋勃超 软工作业
- 2017-08-14 前端日报
- Linux 第20天: (09月12日) Linux启动和内核管理
- 瞬间读懂什么是互联网思维、大数据、O2O、众筹、红海
- 有限状态机的C++实现(2)-bayonet开源网络服务器框架