初识parcel

时间：2022-06-01 17:57:23

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

标签：

相关文章