设为首页 - 加入收藏 华夏网 ()- 云主机,资讯,互联网,人工智能,云计算,大赢家论坛,区块链,VR,站长网!
热搜: 系统 删除 2019
当前位置: 主页 > 水果奶奶论坛 > 正文

与Webpack类似的工具还有多少及差异

发布时间:2021-06-04 03:00 所属栏目:[水果奶奶论坛] 来源:互联网
导读:一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割,组织和打包应用。每个模块完成一个特定的子功能,所有的模块按某种方法组

模块化是一种处理复杂系统分解为更好的可管理模块的方式

可以用来分割,组织和打包应用。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体(bundle)

在前端领域中,并非只有webpack这一款优秀的模块打包工具,还有其他类似的工具,例如Rollup、Parcel、snowpack,以及最近风头无两的Vite

通过这些模块打包工具,能够提高我们的开发效率,减少开发成本

这里没有提及gulp、grunt是因为它们只是定义为构建工具,不能类比

Rollup

Rollup 是一款 ES Modules 打包器,从作用上来看,Rollup 与 Webpack 非常类似。不过相比于 Webpack,Rollup要小巧的多

现在很多我们熟知的库都都使用它进行打包,比如:Vue、React和three.js等

举个例子:

// ./src/messages.js 

export default { 

  hi: 'Hey Guys, I am zce~' 

 

// ./src/logger.js 

export const log = msg => { 

  console.log('---------- INFO ----------') 

  console.log(msg) 

  console.log('--------------------------') 

 

export const error = msg => { 

  console.error('---------- ERROR ----------') 

  console.error(msg) 

  console.error('---------------------------') 

 

// ./src/index.js 

import { log } from './logger' 

import messages from './messages' 

log(messages.hi) 

然后通过rollup进行打包

$ npx rollup ./src/index.js --file ./dist/bundle.js 

打包结果如下图

可以看到,代码非常简洁,完成不像webpack那样存在大量引导代码和模块函数

并且error方法由于没有被使用,输出的结果中并无error方法,可以看到,rollup默认开始Tree-shaking 优化输出结果

因此,可以看到Rollup的优点:

代码效率更简洁、效率更高

默认支持 Tree-shaking

但缺点也十分明显,加载其他类型的资源文件或者支持导入 CommonJS 模块,又或是编译 ES 新特性,这些额外的需求 Rollup需要使用插件去完成

综合来看,rollup并不适合开发应用使用,因为需要使用第三方模块,而目前第三方模块大多数使用CommonJs方式导出成员,并且rollup不支持HMR,使开发效率降低

但是在用于打包JavaScript 库时,rollup比 webpack 更有优势,因为其打包出来的代码更小、更快,其存在的缺点可以忽略

Parcel

Parcel ,是一款完全零配置的前端打包器,它提供了 “傻瓜式” 的使用体验,只需了解简单的命令,就能构建前端应用程序

Parcel 跟 Webpack 一样都支持以任意类型文件作为打包入口,但建议使用HTML文件作为入口,该HTML文件像平时一样正常编写代码、引用资源。如下所示:

<!-- ./src/index.html --> 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

  <meta charset="UTF-8"> 

  <title>Parcel Tutorials</title> 

</head> 

<body> 

  <script src="main.js"></script> 

</body> 

</html> 

main.js文件通过ES Moudle方法导入其他模块成员

// ./src/main.js 

import { log } from './logger' 

log('hello parcel') 

// ./src/logger.js 

export const log = msg => { 

  console.log('---------- INFO ----------') 

  console.log(msg) 

运行之后,使用命令打包

npx parcel src/index.html 

执行命令后,Parcel不仅打包了应用,同时也启动了一个开发服务器,跟webpack Dev Server一样

跟webpack类似,也支持模块热替换,但用法更简单

同时,Parcel有个十分好用的功能:支持自动安装依赖,像webpack开发阶段突然使用安装某个第三方依赖,必然会终止dev server然后安装再启动。而Parcel则免了这繁琐的工作流程

同时,Parcel能够零配置加载其他类型的资源文件,无须像webpack那样配置对应的loader

打包命令如下:

npx parcel src/index.html 

由于打包过程是多进程同时工作,构建速度会比Webpack 快,输出文件也会被压缩,并且样式代码也会被单独提取到单个文件中

可以感受到,Parcel给开发者一种很大的自由度,只管去实现业务代码,其他事情用Parcel解决

与Webpack类似的工具还有多少及差异

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章