前端战五渣学前端——初探Parcel急速打包

文中有视频，建议在wifi环境下观看，并使用电脑

为了传视频，发现自己的服务器带宽不行，特别卡，然后弄的oss，发现oss好便宜啊！！

parcel是什么呢？？？首先我们得了解，parcel做的事情跟webpack差不多，只是差不多。之前在官网出现过类似“开箱即用”、“0配置打包”等字样，看样子是一个主打简洁的一个打包工具。

之前我接触的打包 工具 有什么gulp，grunt，webpack，还听说过browserify和fis（听说过，没有用过）都是打包工具，但是当我发现有这么个parcel的时候，这玩意真的是另辟蹊径啊。在webpack中，js是“一等公民”，从我们在webpack配置入口文件是js就可以看出来。但是parcel竟然可以以html文件为入口文件，这我就感觉很牛逼了，毕竟我从一开始就认为html应该是最基础的，是用户或者说客户端最先接收到的文件，然后剩余的文件都是从html文件直接或者间接引入的。

parcel's Features

:rocket: 极速打包 Parcel——使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

:package: 将你所有的资源打包——Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。

:tropical_fish: 自动转换——如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

:scissors: 零配置代码分拆——使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆，因此你只需要在初次加载时加载你所需要的代码。

:fire: 热模块替换——Parcel 无需配置，在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

:rotating_light: 友好的错误日志——当遇到错误时，Parcel 会输出 语法高亮的代码片段，帮助你定位问题。

官网还在最后贴出与其他打包工具的打包速度对比（可见parcel是多以速度自豪）

是否有人跟我有一样的感觉，在一个需要测试或者熟悉某个库的时候，我很抵触去完全写一套webapck的配置，然后进行打包，才能看到真正的效果（可能有人说他们有事先写好的一个简单配置。。。额。。），所以之前真的很希望出现一个开箱即用，不需要态度配置，定制化的打包工具（webpack现已支持(⊙﹏⊙)），没想到啊，parcel就可以这样

废话不多说，how to use parcel

install

官方文档让我们直接全局安装，那我们就全局安装

npm install -g parcel-bundler
复制代码

这个时候我们已经就可以用parcel进行打包了

从上面我们可以看到，我们直接打包的时候，命令是 parcel index.html ，并且直接使用的是 export / import 照打不误，并且还有实时更新的功能。

react

我们工作中经常需要用到类似vue或者react的地方，我们公司用的react，所以我用react做演示，一样很快

这些视频我都没有加速，所以我们可以看出来，parcel的打包速度确实算是可以了，而且不需要配置babel或者postcss，因为parcel已经帮我们预设了一些，如果我们要改，当然也是可以的

自定义.babelrc

那我们来自己定义一下 .babelrc ，我们用ant design来试验一下。

这里不明白的可以看一下antd的文档，我们通过自定义 .babelrc 的内容，可以不用每次引入整个antd，不用单独引入antd的css文件。看效果我们只引入了antd的Button的组件。

scss and image

我们在写一个前端项目的时候，难免会用到。。。。肯定会用到css，而想less，sass这种预编译的语言肯定也都会用到，但是预编译，我们需要多一次转换，webpack中需要对应的loader来处理，但是parcel可以直接写

我在下面中提前保存了一张图片。

这里面偶然看见了parcel的一个特性，高亮的错误提示，很厉害啊，跟vue的类似，整个屏幕给你报错。。。。

这里面scss和图片我们都是直接饮用直接处理的

其余

我上面演示的只是parcel极少的一部分功能，parcel还可以打包多文件，还可以处理typescript啊，vue啊等文件

还可以进行线上打包，就是打包出来的代码是经过压缩过的。

我以为

其实我虽然感觉parcel很牛逼，几乎可以做到零配置就上手使用，但是对于现在复杂的工程化前端项目，千奇百怪的需求，对定制化要求极高的使用场景，我觉得parcel的用武之地不是很大

但是

我会用，就是在我看到一个新的库，一个感兴趣的插件，我肯定会用parcel来打包，因为不用考虑，直接打包看效果就ok了（虽然现在webpack）也可以做到了。。。。

不知道各位看官怎么看parcel这个打包工具呢？？？

我是前端战五渣，一个前端界的小学生。