目录
- Parcel概述
- Parcel的背景
- Parcel的特点
- 快速上手
- HMR —— 模块热替换
- 零配置自动安装依赖
- 支持其他类型资源模块
- 支持动态导入之后自动分包
- 生产模式运行打包
Parcel概述
是一款完全零配置的前端应用打包器，其提供了近乎傻瓜式的使用体验。我们只需要使用它提供的简单的几个命令就可以直接构建前端应用程序了。
Parcel的背景
Parcel发布于2017年，当时的Webpack使用上过于繁琐，官方文档也不是很清晰明了。所以一发布就被推上了封口浪尖。
Parcel的特点
- 完全零配置
- 构建速度更快
- 自动安装依赖，开发更加便捷
PS: 不过现在使用最广的还是
webpack，因为webpack有更好的生态，扩展更丰富，很多问题可以查找资料解决，这两年webpack也越来越好用，开发者也越来越熟悉。Parcel工具对于开发者而言，了解它也是为了学习新技术，保持对新技术和思想的敏感度，从而更好的把握技术的趋势和走向。
快速上手
- 创建目录并使用
npm init -y初始化package.json， - 安装模块
npm i parcel-bundler --save-dev - 创建
src/index.html文件作为入口文件，虽然Parcel支持任意文件为打包入口，但是还是推荐我们使用HTML文件作为打包入口，官方理由是HTML是浏览器运行的入口，故应该使用HTML作为打包入口。
HTML中引用的文件最终会被Parcel打包到一起到输出目录
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
- 准备
src/foo.js和src/main.js
// foo.js
export default {
bar: () => {
console.log("hello")
}
}
// main.js
import foo from './foo'
foo.bar()
- 在
package.json中配置script
"scripts": {
"parcel": "parcel"
},
- 在命令行中输入
npm run parcel src/index.html，后面要跟着入口文件名称，可以看到有dist文件输出，并且Parcel自动开启了开发服务器，这个开发服务器和webpack中dev-server一样也开启了自动刷新，如果修改文件可以看到浏览器中的内容及时进行更新。
image
HMR —— 模块热替换
Parcel也是和webpack一样支持HMR热替换的
- 在
main.js中写
import foo from './foo'
foo.bar()
if (module.hot) {
// 注意：这里有些不一样
// webpack的支持两个参数指定某个模块执行更新之后的逻辑
// parcel只支持一个参数，当前模块及当前模块依赖的模块更新后会执行逻辑
module.hot.accept(() => {
console.log('hmr')
})
}
- 浏览器中修改些文字，在
foo.js中修改代码，可以看到浏览器中的文字没有刷新，但是控制台刷新了新的代码。
export default {
bar: () => {
console.log("hello1")
}
}
自动安装依赖
我们在开发的时候，如果需要第三方模块，就需要先关闭dev-server，去安装第三方模块，安装完成之后再启动dev-server，就比较麻烦。
这里可以不需要停止dev-server就可以使用。
- 在模块中引用
jquery
// main.js
import $ from 'jquery'
$(document.body).append('<h1>hello~</h1>')
- 可以看到保存之后parcel会自动安装依赖
零配置支持其他类型资源模块
使用Parcel不需要引入loader或者plugins就可以支持其他类型资源模块。
- 在
src/中添加一个style.css文件
body {
background-color: yellow;
}
- 在
main.js中引入，保存之后样式可以立即生效
import './style.css'
- 在
src中导入一张图片，在main.js中引入，保存之后图片也会立即显示。
import logo from './zce.png'
支持动态导入之后自动分包
- 将
jquery改为动态导入
import('jquery').then($ => {
$(document.body).append('<h1>hello~</h1>')
const img = $('<img>').attr('src', icon)
$(document.body).append(img)
})
- 可以看到浏览器中会jquery进行了单独打包。
image
生产模式运行打包
很简单，在命令行后面添加一个build，后面跟着入口文件的路径即可。
npm run parcel build src/index.html
可以看到dist目录下，代码都进行了压缩，而且css代码也单个进行了提取，自动生成了source map
PS: 相同体量项目下，
parcel的打包速度比webpack快很多，因为parcel内部使用的是多进程同时去工作，充分发挥了多核CPU的性能，webpack中可以使用happypack插件来实现。
Parcel使用下来很舒服，不需要我们额外的进行很多配置，自动的帮我们处理了很多的事情。
网友评论