关于javascript:Parcel-零配置的模块打包工具

Parcel 概述
- Parcel 的背景
- Parcel 的特点
疾速上手
- HMR —— 模块热替换
- 零配置主动装置依赖
- 反对其余类型资源模块
- 反对动静导入之后主动分包
生产模式运行打包

是一款齐全零配置的前端利用打包器，其提供了近乎傻瓜式的应用体验。咱们只须要应用它提供的简略的几个命令就能够间接构建前端应用程序了。

Parcel公布于 2017 年，过后的 Webpack 应用上过于繁琐，官网文档也不是很清晰明了。所以一公布就被推上了封口浪尖。

齐全零配置
构建速度更快
主动装置依赖，开发更加便捷

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一样也开启了主动刷新，如果批改文件能够看到浏览器中的内容及时进行更新。

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 应用下来很难受，不须要咱们额定的进行很多配置，主动的帮咱们解决了很多的事件。

目录

Parcel 概述

Parcel 的背景

Parcel 的特点

疾速上手

HMR —— 模块热替换

主动装置依赖

零配置反对其余类型资源模块

反对动静导入之后主动分包

生产模式运行打包