继webpack后又一打包神器Parcel!
parcel中文网站:http://www.itbaby.me/doc/parcel/getting_started.html
在继grunt、gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的。而webpack还在上升的势头的时候,又一打包神器横空出世——parcel。
parcel的特性:
快速,零配置的 Web 应用程特性
- 快速打包
- Parcel 使用工作进程启用多核编译,并具有文件系统缓存,即使在重新启动后也可快速重新构建。
- 打包所有资源
- Parcel 支持JS,CSS,HTML,文件资源等等 - 不需要安装任何插件。
- 自动转换
- 在需要时,代码使用 Babel,PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。
- 零配置代码拆分
- Parcel 使用动态 import() 语法拆分您的输出包,所以只加载初始加载时所需的内容。
- 模块热替换
- 当你在开发过程中进行更改时,Parcel 会自动更新浏览器中的模块,不需要进行任何配置。
- 友好的错误记录
- 遇到错误时,Parcel 会以语法高亮的形式打印的代码帧,以帮助你查明问题。
选择parcel的原因:
很多打包工具都围绕配置和插件进行构建的,因此看到有500行以上配置的应用程序正常运行并不罕见。这种配置不仅繁琐和费时,而且也很难得到正确的配置,必须为每个应用程序复制。通常情况下,这可能导致优化的应用程序发送到生产环境。parcel 被设计为零配置:只要将它指向你的应用程序的入口点,它就能做正确的事情。
现有的打包工具大多都执行得慢,具有很多文件和依赖的大型应用将花费数分钟去构建,随着时间的推移,这将会相当痛苦的事情。监听文件变更能帮助重新编译,当时初始构建的时候通常还是会很慢。parcel 利用现代的多核处理能力和工作线程去并行编译你的代码。这导致了初始构建的速度极大的提升。它还有一个文件系统缓存,可以保存每个文件的编译结果,以便更快的后续启动。
最后,现有的打包工具都是围绕字符串加载/转换进行构建的,其中转换需要一个字符串,解析它,然后进行一些转换,之后再次生成代码。通常这最终导致许多解析和代码生成在单个文件上运行,这是低效的。相反,parcel 的转换工作在 AST上,所以这样每个文件就有一个解析,多个转换和一个代码生成。
parcel的安装
- 安装parcel
yarn global add parcel-bundler 或
npm install -g parcel-bundler
- 检验parcel是否安装成功
parcel --version