关于javascript: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.jsexport default {  bar: () => {    console.log("hello")  }}

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