与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办理
（编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
