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

最新推荐文章于 2021-09-27 12:06:34 发布

weixin_33699914

最新推荐文章于 2021-09-27 12:06:34 发布

阅读量137

点赞数

文章标签：前端 json ViewUI

原文链接：https://my.oschina.net/tongjh/blog/866606

版权

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 直接执行