零配置打包工具 Parcel 实践
Posted A_山水子农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零配置打包工具 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构建用于运行在浏览器中的网页，比较适合小型的项目，使用中还是存在不少的坑。
以上是关于零配置打包工具 Parcel 实践的主要内容，如果未能解决你的问题，请参考以下文章