前端模块打包利器 Rollup.js 入门

原创
2017/03/25 00:59
阅读数 767

Rollup.js 入门

npm init

首先在项目目录下建立一个package.json文件

npm i -g rollup

全局安装rollup命令,安装完成后使用rollup -h查看命令参数

npm i --save-dev rollup-plugin-babel babel-preset-es2015-rollup

安装babel库,babel可以把es6的代码翻译成es5代码

npm i --save-dev rollup-plugin-uglify

压缩代码的体积

touch rollup.config.js

rollup的配置文件

import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
export default {
	entry:"src/main.js",
	dest:"dist/main.min.js",
	format:"iife",
	plugins:[uglify(),babel()]
}

entry 为打包入口文件

dest 为处理完成后保存的目

plugins rollup插件

fromat 指定要打包成什么格式

amd – 使用像requirejs一样的模块定义
cjs – CommonJS,适用于node和browserify / Webpack
es6 (default) – 保持ES6的格式
iife – 使用于<script> 标签引用的方式
umd – 适用于CommonJs和AMD风格通用模式

touch src/.babelrc

babel的配置文件,可以写在src下,不用非得放到项目根目录下

{
	"presets": ["es2015-rollup"]
}

rollup -c

编译文件,可以已经生成了dist/main.min.js文件,ok 成功。

Rollup 也支持直接在模块中来被调用执行,这样很方便跟 grunt/gulp 等工具进行协作。我们创建一个build.js文件来进行配置

touch build.js

var rollup = require('rollup');
var babel = require('rollup-plugin-babel');
var uglify = require('rollup-plugin-uglify');

rollup.rollup({
	entry:'src/main.js',
	plugins:[
		uglify(),
		babel()
	]
}).then(function(bundle){
	bundle.write({
		format:'umd',
		moduleName:'main',
		dest:'dist/main.min.js'
	})
});

然后用 node 直接执行

node build.js

可以得到一样的执行结果

rollup.rollup() 返回一个带着 bundle 作为 resolve 回调参数的 Promise 对象

参考网站

http://www.cnblogs.com/vajoy/p/5518442.html

https://github.com/rollup

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部