You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
在Rollup官方提供的例子中我们就可以看出,Rollup(包括他的插件)做的仅仅是JS的编译打包工作,这和webpack是有本质区别的。webpack是一个通用的前端资源打包工具,它不仅处理JS,也可以通过loader来处理 CSS、图片、字体等各种前端资源,还提供了 hot reload 等方便前端项目开发的功能。如果不是开发一个JS框架,webpack显然会是一个更好的选择。
很多人知道
vue
等框架的JS代码是用rollup
编译的,那么rollup
是什么呢,它和webpack
有什么异同?如果你也有这个疑惑,那么这篇文章正好可以解答。Rollup 是什么
Rollup 本身(不包含任何插件的情况下)只是一个模块语法的转换工具,他可以把 ES6 的模块语法编译成不同的语法:
cjs
在node中使用的CMD语法iife
直接在浏览器中运行amd
requirejs 的语法umd
兼容amd
和cmd
举个例子,我们有用 ES6 模块语法编写的代码如下:
foo.js
main.js
显然ES6的模块语法无法在node中运行,我们使用rollup用这个命令进行打包:
打包出的结果如下:
可以看到rollup做了两件事:
ES6
模块语法编译成了node
的语法这就是Rollup本身做的所有事情,是不是很简单明了?
那么会有童鞋要问了,这也太简单了吧?如果我们需要编译
es6/7
中的其他语法呢?如何处理
ES6/7
等新的JS语法Rollup本身做的非常精简,任何除了上面讲到的功能外的其他功能,都需要插件来实现,比如我们要把
ES6
中的箭头函数编译一下,就需要安装额外的插件。把前面的代码稍微改一下,假设我们有如下代码:
foo.js
main.js
那么我们打包成
cjs
之后变成了这样:可以看到正如我们前面所说的,箭头函数根本不会被编译,因为
rollup
默认只会编译模块语法,其他语法他是不管的。为了编译 箭头函数等其他es6/7
的语法,我们需要一个插件 rollup-plugin-babel我们在
rollup.config.js
中进行如下配置(这里省略了.babelrc
的配置):那么打包出来的代码就变成这样了:
可以看到其中的箭头函数已经被转成了
function
。Tree shaking
我们在webpack源码解析 中提到过,webpack本身其实进行 tree-shaking 优化,他只负责把无用的exports删除,最终是由
uglify
完成的摇树优化。我们都知道Webpack 的treeshaking其实是从 rollup 中
借鉴
来的,而rollup原生就实现了 tree shaking。如果我们把上面的代码稍微做一点修改,改成这样:foo.js
main.js
可以看到其中的
bar
函数被直接删除了。如何在我的项目中使用Rollup
Rollup 官方提供了两个示例项目 https://github.com/rollup/rollup-starter-app 和 https://github.com/rollup/rollup-starter-lib。一个项目是开发JS框架,一个是我们正常的项目。
rollup-starter-lib
重点是展示如何把你的代码打包成不同的版本,以适应不同的环境。这个项目中打包成了三种模块语法:es
,cjs
和umd
rollup-starter-app
重点是展示如何打包你的项目以在浏览器中运行。这个项目会把代码打包成iife
模式,也就是把你的代码打包成一个自执行函数。另外还使用了uglify
压缩代码,以及可以生成sourcemap和 webpack 的区别
在Rollup官方提供的例子中我们就可以看出,Rollup(包括他的插件)做的仅仅是JS的编译打包工作,这和webpack是有本质区别的。webpack是一个通用的前端资源打包工具,它不仅处理JS,也可以通过loader来处理 CSS、图片、字体等各种前端资源,还提供了
hot reload
等方便前端项目开发的功能。如果不是开发一个JS框架,webpack显然会是一个更好的选择。如果说相同点,Rollup和Webpack的核心都是处理JS,他们都会解析JS的语法树,然后分析模块依赖。如果对webpack的工作原理不了解,也可以参见我之前写的系列博客 webpack源码解析
The text was updated successfully, but these errors were encountered: