Parcel - 极速零配置Web应用打包工具

开发项目或者写 demo 的时候，还在为 webpack 的配置而烦恼？还在编写臃肿的 gulpfile.js？也许你需要 Parcel 来拯救你的时间。

Parcel - 极速零配置Web应用打包工具

Parcel 的优势：

1. 极速打包时间

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

2. 将你所有的资源打包

   Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。

3. 自动转换

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

4. 零配置代码分拆

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

5. 热模块替换

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

6. 友好的错误日志

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

Parcel 的缺点：

1. 缺乏插件

   新出的打包工具，还在成长当中，插件的数量和 webpack, gulp 这种成熟的工具是无法相比的。

2. 不太适合大项目

   毕竟 0 配置，无需过多的配置即可使用。但是，若项目有复杂的文件处理，也许花点时间在配置上面更能提高效率。

使用 Parcel 开发

1. 安装 Parcel

   $    npm install parcel-bundler --global

2. 新建项目

   $    mkdir parcel-demo
   $    cd parcel-demo
   $    npm init -y

3. 处理 js 文件

   一般情况下，都是使用 es6 开发，然后使用 babel 编译成浏览器能运行的 js 代码，这时需要安装 babel 的插件。

   $    yarn add babel-preset-env --dev
   #    如果需要编译其他版本的请自行安装。

   新建 babel 的配置文件 .babelrc ，这里只展示最基础的配置：

   {
     "presets": [
       "env"
     ],
     "plugins": []
   }

   ​

4. 处理 css 文件

   在 Parcel 中，使用 postcss 去处理各种各样的 css 和 scss 文件：

   $    yarn add postcss autoprefixer node-sass --dev

   新建 postcss 配置文件 .postcssrc :

   {
     "plugins": {
       "autoprefixer": {
         "grid": true
       }
     }
   }

   autoprefixer 的浏览器兼容性配置文件 .browserlistrc ，具体的配置可以到 这里 查看。

   > 1%
   last 2 versions
   iOS 8

   ​

5. 处理 html 文件

   暂无，正在寻找能将小图片转换为 base64 Parcel 插件

6. 开发环境

   如果需要监听文件并启动一个 HRM 服务器的话，请使用 parcel xxx.html

   如果只需要监听并编译某个文件的话，请使用 parcel watch xxx.html, 该命令不会启动热更新服务器，当时会监听文件的变化。

7. 打包代码

   $    parcel build entry.js -d output_dir --public-url public_dir

   entry.js 为打包的入口文件，可以是 HTML 文件。

   --out-dir / -d 为设定打包后文件存放的路径，默认为 ./dist

   --public-url 为设定打包后的引入文件的路径，默认为 /dist/。若为 ./ 则打包后所有的文件都应放置在同一个目录下；若为 custom_dir 则打包后，除了入口 html 文件，其余文件应当放置在 custorm_dir 目录下。建议设置为绝对路径，此处有多文件资源引入的坑，已提交 issue。

Enjoy Coding with zero configurations.

附上一个简易的 Parcel 项目架构，GitHub 。拉下即可开始开发。