初识parcel

webpack是一个很好的web应用打包工具,但是使用webpack需要很多繁琐的配置。parcel则提供了一个零配置的方案,大大简化了使用web应用的工具的难度。

Parcel特性

Parcel有以下一些特性:

1、相比于Webpack, Rollup以及Browserify,Parcel打包时间极快

这是Parcel做的一个基准测试,基于一个合理大小的应用,包含1726个模块, 6.5M 未压缩大小. 在一台有4个物理核心 CPU 的 2016 MacBook Pro 上构建。

  • browserify: 22.98s
  • webpack: 20.71s
  • parcel: 9.98s
  • parcel(使用缓存): 2.64s

2、Parcel对Html,JS,CSS以及其他一些assets文件是开箱即用,不需要额外的插件

3、零配置,Parcel内置支持代码拆分,热模块重新加载(hmr),CSS预处理器,开发服务器,缓存等在web打包上用到的功能。

安装Parcel

使用yarn

yarn global add parcel-bundler

创建package.json

yarn init -y

使用npm

npm install -g parcel-bundler

创建package.json


npm init -y

Parcel的使用

创建index.html和index.js

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Parcel示例</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>

index.js

document.write("Parcel示例");

执行parcel,运行开发服务器

$ parcel index.html
Server running at http://localhost:1234
∞  Building...

∞  Building index.html...
∞  Building index.js...
√  Built in 6.43s.

开发服务器的默认端口为1234,打开浏览器输出 http://localhost:1234/即可访问。

指定开发服务器的端口

parcle index.html -p 8888

parcel的开发服务器是内置支持热模块替换,至此不需要做任何配置。

parcel可以接受任何类型的文件作为入口文件,但推荐使用html或js文件。

集成SCSS

安装node-sass

npm install node-sass 

创建style.scss文件,内容如下:

body{
 background: blue;
 color: white;
}

在index.js导入style.scss

import './style.scss'
document.write("Parcel示例");

Parcel会自动把scss转换为对应的css,也无需任何配置。

Parcel产品构建

使用build命令构建产品

parcel build index.js

使用parcel的默认构建产品,parcel会帮我们做了这几件事:

  • 关闭监听模式
  • 关闭热模块替换(hmr)
  • 开启 minifier 来减少输出包文件的大小,其中Parcel 使用的压缩的工具有JavaScript 的uglify-es,CSS 的 cssnano以及HTML 的 htmlnano

指定输出目录

parcel build index.js -d build/output

设置public url

parcel build index.js --public-url /myassets/

构建的访问url为:

禁用压缩

parcel build index.js --no-minify

禁用文件系统缓存

parcel build index.js --no-cache

Parcel的Github地址:https://github.com/parcel-bundler/parcel

版权声明:著作权归作者所有。