基本介绍

• Parcel 是在 2017 年出现的
• 当时的 webpack 使用上过于繁琐
• 完全零配置，不侵入开发代码
• 开发时直接使用依赖，自动安装
• 构建速度更快，多进程打包

使用

无需任何配置，指定打包入口即可

 "scripts": {
    "dev": "parcel src/*.html",
    "build": "parcel build src/*.html"
  },

基本介绍

• Rollup 更加小巧
• 仅仅是一款 ESM 打包器
• Rollup 中并不支持类似 HMR 这种高级特性
• 诞生的目的：
  • 并不是要与 webpack 全面竞争
  • 提供一个充分利用 ESM 各项特性的高效打包器

为什么需要模块化打包

• ES Modules 存在环境兼容问题
• 模块化文件过多，网络请求频繁
• 所有的前端资源都需要模块化（资源文件）

打包工具的作用

• 新特性的语法转换，例如 es6 编译成 es5
• 将散落的模块文件再次合并到一起（解决频繁请求模块文件的问题）
• 支持不同种类的前端资源类型

快速上手

1. 初始化项目，安装 webpack、webpack-cli

   yarn init --yes
   yarn add webpack webpack-cli -D
   

2. 在根目录下新建一个 src/index.js 作为入口文件

   import createHeading from './heading.js'
   
   const heading = createHeading()
   
   document.body.append(heading)
   

   heading.js

   export default () => {
     const element = document.createElement('h2')
   
     element.textContent = 'Hello world'
     element.addEventListener('click', () => {
       alert('Hello webpack')
     })
   
     return element
   }
   

3. 使用 webpack-cli 进行初体验

   yarn webpack --mode production
   

   相关信息

   Webpack4之后的版本支持零配置打包， 会默认使用 src 目录下的 index.js 文件作为入口文件进行打包，并输出到 dist/main.js

什么是模块化

• 模块化是一种开发思想、管理方式、生产方式和一种解决问题的方案
• 是指解决一个复杂问题时自顶向下逐层把整体划分成若干组成部分的过程
• 放在开发场景中，模块化就是有组织地把一个大文件拆成独立并互相依赖的多个小文件。在这里模块化是一种代码管理方式
• 每个模块的内部数据和方法是私有的，只是向外部暴露一些属性和方法（接口）供其它模块使用

模块化的意义

模块化的目的在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。

快速入门

安装 gulp 命令行工具

npm i gulp-cli -g

V8 - JavaScript 引擎

• V8 是驱动 Google Chrome 的 JavaScript 引擎的名称
• V8 提供了 JavaScript 执行的运行时环境
• JavaScript 引擎独立于它所在的浏览器，这个关键特性促成了 Node.js 的兴起
• Node.js 生态系统非常庞大，这要归功于 V8，它还支持桌面应用程序，例如 Electron 等项目

其他 JS 引擎

• Firefox 具有 SpiderMonkey
• Safari 具有 JavaScriptCore（也称为 Nitro）
• Edge 最初基于 Chakra，但最近使用 Chromium 和 V8 引擎重建