Rollup处理并打包JS文件项目实例
关于Rollup
rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下:
- 能组合我们的脚本文件。
- 移除未使用的代码(仅仅使用ES6语法中)。
- 在浏览器中支持使用 Node modules。
- 压缩文件代码使文件大小尽可能最小化。
Rollup最主要的优点是它是基于ES2015模块的,相比于webpack或Browserify所使用的CommonJS模块更加有效率,因为Rollup使用一种叫做tree-shaking的特性来移除模块中未使用的代码,这也就是说当我们引用一个库的时候,我们只用到一个库的某一段的代码的时候,它不会把所有的代码打包进来,而仅仅打包使用到的代码(webpack2.0+貌似也引入了tree-shaking)。
注意:Rollup只会在ES6模块中支持tree-shaking特性。目前按照CommonJS模块编写的jquery不能被支持tree-shaking。
Rollup的应用场景
现在目前流行的打包有 gulp 和 webpack,那么与前面两个对比,我觉得rollup更适合打包js库,但是对于打包一个项目的整个应用的话,我到觉得webpack更适合,比如打包一些图片,字体等资源文件的时候,webpack很适合。
本项目的使用方法
项目地址:GitHub
通过GitHub下载项目文件,在命令行工具定位到项目根目录,然后输入 npm install 安装模块,在输入下面其中一个命令:
1、在命令行中输入以下命令,即可监听文件变化并打包文件
npm run dev
2、在命令行中输入以下命令,即可完成打包
npm run build
Rollup处理并打包JS文件项目实例的更多相关文章
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- webpack打包js文件
当输入 webpack 输入指令 npm run dev 后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...
- 深入学习rollup来进行打包
深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 ...
- webpack打包js,css和图片
1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...
- vite2 打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了. 打包时遇到警告 输出文件名字/static/vendor.9b5698e ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...
- webpack 3.X学习之JS压缩与打包HTML文件
js压缩 webpack自带一个插件uglifyjs-webpack-plugin来压缩js,所以不需要再次安装,当一切都准备妥当,引入uglifyjs-webpack-plugin模块: const ...
- 解决Windows和Linux使用npm打包js和css文件不同的问题
1.问题出现 最近公司上线前端H5页面,使用npm打包,特别奇怪的是每次打包发现css和js文件与Windows下打包不一致(网页使用Windows环境开发),导致前端页面功能不正常. 2.问题排查 ...
随机推荐
- (办公)eclipse连接github cannot open git-upload-pack(git-receive-pack)
原文地址:https://blog.csdn.net/royal__moon/article/details/79427431 打开eclipse安装目录下的eclipse.ini添加一句:-Dhtt ...
- (网页)html中页面传递参数不用cookie不用缓存,js方法搞定
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...
- java实现wc
github项目传送门:https://github.com/yanghuipeng/wc 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程 ...
- SQL中常用系统函数
--1 CONVERT(数据类型,表达式),CAST( 表达式 AS 数据类型) 转变数据类型--将数字转化为字符串SELECT CONVERT(varchar(2),12)+CONVERT(varc ...
- MySQL状态变量Aborted_connects与Aborted_clients浅析
关于MySQL的状态变量Aborted_clients & Aborted_connects分别代表的意义,以及哪些情况或因素会导致这些状态变量变化呢?下文通过实验测试来验证一下,首先我们来看 ...
- Spring入门详细教程(三)
前言 本篇紧接着spring入门详细教程(二),建议阅读本篇前,先阅读第一篇和第二篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/p/101 ...
- JaveScript 中使用 XSLT转换XML文档
我们经常将数据存储在XML 中,在展示的时候需要转换为其它的形式,这里介绍使用XSLT 对XML数据进行转换. 要学习XSLT对XML的转换,需要先了解三个文件. 第一个是存储数据的XML文件:emp ...
- Windows安装paramiko和PyCharm工程导入
借鉴了CSDN博主Liam_Fang的paramiko安装 原文链接:https://blog.csdn.net/weixin_39912556/article/details/80543829 前提 ...
- git笔记(2)-常见命令的使用(详解待续)
1. 常用命令 (1)git --help 帮助命令,其他的类似 (2)git branch 查看分支及其他(创建分支,查看远程分支名称等) (3)git checkout 切换分支以及其他 (3)g ...
- Stopwatch + C#打印日志方法
打印一个接口.方法的运行时间在程序中是很容易遇到的一件事情:现在,我就分享一个我在工作中使用的临时打印日志的方法和结合 Stopwatch 打印测量某个时间间隔的运行时间的方法. Stopwatch ...