与Webpack类似的工具还有多少及差异
|
模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割，组织和打包应用。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体(bundle) 在前端领域中，并非只有webpack这一款优秀的模块打包工具，还有其他类似的工具，例如Rollup、Parcel、snowpack，以及最近风头无两的Vite 通过这些模块打包工具，能够提高我们的开发效率，减少开发成本 这里没有提及gulp、grunt是因为它们只是定义为构建工具，不能类比 RollupRollup 是一款 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 更有优势，因为其打包出来的代码更小、更快，其存在的缺点可以忽略 ParcelParcel ，是一款完全零配置的前端打包器，它提供了 “傻瓜式” 的使用体验，只需了解简单的命令，就能构建前端应用程序 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解决
（编辑：南平站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
