零配置打包工具 Parcel 实践

继 Webpack 之后，又一款打包工具 Parcel 横空出世，Parcel 是快速、零配置的 Web 应用程序打包器；

1、 Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。

2 、Parcel 支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件。

3、在需要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。

4、Parcel 使用动态 import() 语法拆分您的输出包，所以只加载初始加载时所需的内容。

5、当你在开发过程中进行更改时，Parcel 会自动更新浏览器中的模块，不需要进行任何配置。

6、遇到错误时，Parcel 会以语法高亮的形式打印的代码帧，以帮助你查明问题。

关于Parcel 的优缺点，以及Parcel和Webpack的比较，Parcel Vs Webpack讲解的比较详细，本文主要是Parcel实践的实践。

Parcel文档： http://www.css88.com/doc/parcel/getting_started.html
Parcel Github： https://github.com/parcel-bundler/parcel

一、Parcel安装

Parcel是一个Web应用程序打包器(bundler) ，与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能，并且你不需要进行任何配置。首先使用Yarn或npm安装 Parcel：

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

安装完之后可以通过parcel -V查看Parcel的版本：
这里写图片描述
Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换，以便你快速开发。你只需指定入口文件即可：

parcel index.html -p 8089

这里写图片描述
然后在浏览器中打开 http://localhost:8089/ 可以查看index.html页面，parcel支持热更新，会监听html、css、js的改变并即时渲染。

二、模块化项目实践

示例的目录结构：
这里写图片描述

模块化项目首先需要创建一个package.json文件，使用npm init -y或者yarn init -y创建一个默认的package.json文件，修改parcel的运行命令为npm run dev或者yarn run dev。

{
  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html -p 8089"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

虽然全局安装了parcel，在项目中还是推荐安装依赖：

npm install parcel-bundler -S

Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-polyfill，为当前环境提供一个垫片。因为项目中用到了新的对象和方法，所以应当安装babel-polyfill插件。

npm install babel-polyfill -S

然后，创建一个 .babelrc 文件：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"]
}

在安装的parcel依赖中自带了postcss的所有插件，所以项目中只需要创建一个 .postcssrc 文件：

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

js和css都已经处理完成，安装完所需的依赖后package.json：

{
  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html -p 8089"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "parcel-bundler": "^1.6.2"
  }
}

index.html

<!DOCTYPE html>
<html>
 <link>
    <title>parcel使用</title>
    <link rel="stylesheet" href="./static/css/style.css"/>
 </head>
 <body>
   <header>
      <img class="logo"
           src="./static/images/logo.svg"
           alt="Parcel">
      <h2>快速，零配置的 Web 应用程序打包器</h2>
      <div class="parcel">
        <img src="./static/images/parcel-back.png"
             srcset="./static/images/parcel-back.png 2x, ./static/images/parcel-back.png 3x">
        <img src="./static/images/parcel-front.png"
             srcset="./static/images/parcel-front.png 2x, ./static/images/parcel-front.png 3x"> </div>
      <div class="wrapper">
        <div class="item1">parcel</div>
        <div class="item2">parcel</div>
        <div class="item3">parcel</div>
        <div class="item4">parcel</div>
        <div class="item5">parcel</div>
      </div>
   </header>
    <script src="./static/js/index.js"/></script>
 </body>
</html>

运行npm run dev 在浏览器中打开http://localhost:8089/如图所示：
这里写图片描述
运行后生产.cache和dist目录，.cache是缓存文件，dist是打包文件；dist目录如下：

运行后修改html、css、js页面都会自动更新。Parcel构建速度比webpack快，但 Parcel输出文件比webpack大，Parcel构建用于运行在浏览器中的网页，比较适合小型的项目，使用中还是存在不少的坑。