中文文档：http://www.css88.com/doc/parcel/
一、安装
我使用的是npm：
npm install -g parcel-bundler
使用以下命令在你的项目目录中创建一个 package.json 文件：
npm init -y
二、接入
Parcel 可以将任何类型的文件作为 入口点(entry point) ，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的 URL 。
接下来，创建一个 index.html 和 引入一个index.js 文件。
index.html:
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
如果想要使用sass（node-sass）和es6（babel-polyfill），先用npm安装：
npm install node-sass
npm install --save babel-polyfill
在index.js里引入：
index.js:
import 'babel-polyfill'
// 直接引入scss文件就行了！
import 'common.scss'
三、运行
Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持 模块热替换 ，以便你快速开发。你只需指定 入口文件 即可：
parcel index.html
也可以在package.json文件里配置好
"scripts": {
"start": "parcel index.html"
},
然后使用
npm run start
现在在你浏览器中打开 http://localhost:1234/ 。 您也可以使用 -p <port number> 选项覆盖默认端口。
模块热替换（HMR）通过在运行时自动更新浏览器中的模块，而不需要刷新整个页面来改进开发体验。 这意味着应用程序状态可以在小的更改时保留。 Parcel 的 HMR 实现支持开箱即用的JavaScript 和 CSS 资源。 在生产模式下打包时，HMR 自动被禁用。
四、打包
直接打包
parcel build index.html
或者在package.json文件里配置好
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
打包命令包含以下选项：
- 设置输出目录（默认: "dist"）
-d 目标路径 - 设置要提供服务的公共 URL（会把编译后的引入的文件的路径统一修改）
--public-url 目标路径 - 禁用压缩（默认: minification enabled）
--no-minify - 禁用文件系统缓存（默认: cache enabled）
--no-cache
假设我要做一个手机端的页面，部署上服务器的地址是：www.abcdefg.com/mobile/，项目地址在mobile文件夹里，需要修改提供服务的公共URL；
由于start的时候会把编译文件放在“dist”目录下，为了避免混淆，想要将打包的文件放在“build”目录下；
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html -d build --public-url /mobile/"
},
PS：以下是个悲伤的故事
如果babel-polyfill搞事
IE上JS脚本无法运行，在别的浏览器上报错。
在index.html中引入：
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>
网友评论