快速学习 rollup 打包

前端精髓

共 1272字,需浏览 3分钟

 ·

2021-06-15 20:01


1、rollup是什么


JavaScript的ES模块打包器


从一个入口文件开始,将所有使用到的模块文件都打包到一个最终的发布文件中


2、与webpack的差异


定位不同:webpack偏向于应用打包;rollup更专注于JavaScript类库打包


(1)如果你需要代码拆分(Code Splitting),或者你有很多静态资源需要处理,再或者你构建的项目需要引入很多CommonJS模块的依赖,那么 webpack 是个很不错的选择;


(2)如果您的代码库是基于 ES2015 模块的,而且希望你写的代码能够被其他人直接使用,你需要的打包工具可能是 Rollup;


3、rollup的重要特性


(1)它使用ES6的模块标准,这意味着你可以直接使用import和export而不需要引入babel(当然,在现在的项目中,babel可以说是必用的工具了)。


(2)Rollup.js一个重要特性叫做'tree-shaking',这个特性可以帮助你将无用代码(即没有使用到的代码)从最终的生成文件中删去。(这个特性是基于ES6模块的静态分析的,也就是说,只有export而没有import的变量是不会被打包到最终代码中的)

快速开始

npm install rollup -D


然后在本地创建一个项目:

mkdir -p my-projectcd my-project


其次我们创建一个入口文件,使用 lodash 测试代码写个简单的 demo:

import after from 'lodash/after'
var saves = ['profile', 'settings'];
var done = after(saves.length, function() { console.log('done saving!');});
done()done()


基本代码准备好了之后,我们写 rollup 的配置文件 (rollup.config.js 在根目录下):

export default {    input:'src/main.js',    output:{        file:'dist/bundle.cjs.js',//输出文件的路径和名称        format:'cjs',//五种输出格式:amd/es6/iife/umd/cjs        name:'bundleName'//当format为iife和umd时必须提供,将作为全局变量挂在window下    }}


package.json 添加一条运行的命令:

{ "scripts": {    "build": "rollup --config"  },}


这样在根目录下就生成了一个bundle.cjs.js,就是我们想要的打包后的文件。

浏览 35
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报