目录
-
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一样也开启了主动刷新，如果批改文件能够看到浏览器中的内容及时进行更新。
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进行了独自打包。
生产模式运行打包
很简略，在命令行前面增加一个build，前面跟着入口文件的门路即可。
npm run parcel build src/index.html
能够看到dist目录下，代码都进行了压缩，而且css代码也单个进行了提取，主动生成了source map
PS: 雷同体量我的项目下，
parcel的打包速度比webpack快很多，因为parcel外部应用的是多过程同时去工作，充分发挥了多核CPU的性能，webpack中能够应用happypack插件来实现。
Parcel应用下来很难受，不须要咱们额定的进行很多配置，主动的帮咱们解决了很多的事件。
发表回复