Rollup处理并打包JS文件项目实例

关于Rollup

rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下:

  1. 能组合我们的脚本文件。
  2. 移除未使用的代码(仅仅使用ES6语法中)。
  3. 在浏览器中支持使用 Node modules。
  4. 压缩文件代码使文件大小尽可能最小化。

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

原文地址:https://www.cnblogs.com/jofun/p/9114453.html

时间: 2024-10-07 21:07:42

Rollup处理并打包JS文件项目实例的相关文章

使用r.js打包js文件

之前的文章里有介绍requirejs的基本使用方法,但是直接使用requirejs会暴露出一个问题,就是当模块过多的时候,requirejs就会引入许多js文件,大大的增加了请求数,那么有的朋友就要说了,我们自己压缩那些模块文件不就行了么,其实仔细想想这样到底行不行,答案是行!但是很麻烦: 1. 首先一般我们写模块时不会去定义模块名字,因为模块名字默认就是js文件名字,如果自己手动去写模块名,就增加了额外的工作量. 2. 加载顺序的问题,自己手动压缩,就要严格把控好模块的先后顺序(特别是有jqu

webpack打包js文件

1.安装node.js 2.新建空文件夹,输入npm init -y,生成package.json文件 3. npm install -D webpack webpack-cli 4.新建三个文件夹src.out.config 5.在config文件夹下新建webpack.config.js文件 const path = require('path') module.exports={ entry:{ index:'./src/Cesium.js' }, output:{ filename:'[

webpack打包js,css和图片

1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.js build.js 3.打包css文件:要在cmd上输入npm install style-loader css-loader 安装 module.exports={ //配置js entry:'./main.js',//webpack要打包的源文件 output:{ filename:'buil

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/4982646.html http://www.tuicool.com/articles/viequay 实现要点: 1.如何运行gulp的任务,加入新建好一个如下任务: // 语法检查 gulp.task('jshint', function () { gulp.src('js/**/*.js') .p

requirejs 多页面,多入口js文件打包总结

需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控制?我们是这样控制的,代码如下: <script src="${resource}/js/base/require.js" data-main="${resource}/js/accountMain"></script> 这个${resource

webpack打包后bundle.js文件过大的问题

由于webpack将所有的文件合并到一个js文件.因此打包后的文件过大,导致网络请求不畅. 今天尝试了一下webpack打包.结果打出来3.6M.因为之前在本地测试的原因,一直用的webpack -w的命令. 即监控入口文件有无改动,若有改动,则自动编译. 更改命令:webpack -p -w webpack -p起到压缩的作用. 结果为1.4M. 查阅了一下相关资料.果断用nginx进行gzip压缩. 进入 /usr/local/etc/nginx目录下 打开编辑nginx.conf 配置如下

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

gulp打包js多个文件夹并压缩混淆,编译ES6语法

感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件gulp-uglify 执行: cnpm install gulp-uglify --save-dev (这里暂时都用淘宝镜像cnpm) 这时候已经可以开始压缩es5的js文件了,但是我们要编译es6语法,那就需要babel 执行: cnpm install gulp-babel --save-dev