Parcel —— 零配置的模块打包工具

2020-11-01 本文已影响0人顽皮的雪狐七七

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使用下来很舒服，不需要我们额外的进行很多配置，自动的帮我们处理了很多的事情。

Parcel —— 零配置的模块打包工具

目录

Parcel概述

Parcel的背景

Parcel的特点