1-1. 如何在浏览器端实现模块化

课程简介

  • 难度：1
  • 重要性：4
  • 时长：42

本门课需要的前置知识：

  • ES6
  • 模块化
  • 包管理器
  • git

这些内容都学习过，虽然有不少细节都忘记了，不过应该影响不大。如果在学习中遇到了一些难点没法看懂，并且是和之前所学的这些知识相关的，再回头回顾一下相应的笔记即可。

本门课的讲解特点：

  1. 合适的深度：webpack 使用层面很简单，但原理层面非常复杂。
  2. 合适的广度：webpack 生态圈极其繁荣，有海量的第三方库可以融入到 webpack。

该课程的深度：由于 webpack 涉及到的知识点的广度和深度都很大，但是仅仅是学会使用的话，就比较简单，而原理层面则十分复杂，不过，核心的一些理念原理，还是会介绍的。

webpack 将会彻底改变我们之前那种传统的开发方式 —— 新建一个 html 页面，然后引入 css 文件，再引入 js 文件。如果跳过该课程，直接学习后面的 vue 和 react 的话，就会出现一个断层，就无法理解 vue、react 等其它框架，为什么这样搭建工程。

袁老说了：

  1. 这门阶段1的 webpack 课程，深度绝对可以满足就业的要求。公司在招聘前端开发时，如果招聘信息中写着要求熟悉 webpack 构建工具，以该教程的深度是绝对够了的。多说一嘴，如果招聘信息中明确写着要求熟悉构建工具的话，那么应该除了 webpack 之外，还需要熟悉 vite，感觉 vite 目前也非常重要。
  2. 这是阶段1的课程，袁老说阶段2也许还会有提升课程（至少目前还没有）。

小结：这一部分和本节的标题没啥关系，主要是袁老在感慨 webpack 这门课程不好讲解。并且先提前声明，咋们这门课程，接下来会如何讲解，先有个心里准备。

浏览器端的模块化

问题：

  • 效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率。
  • 兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题。
  • 工具问题：浏览器不支持npm下载的第三方包。

这些仅仅是前端工程化的一个缩影。

当开发一个具有规模的程序，你将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等，我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻的影响到开发进度，如果没有一个好的工具解决这些问题，将使得开发进度变得极其缓慢，同时也让开发者陷入技术的泥潭。

根本原因

思考：上面提到的问题，为什么在node端没有那么明显，反而到了浏览器端变得如此严重呢？

答：在node端，运行的JS文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多。

node环境几乎不存在工程化问题，而浏览器环境存在这些工程化问题的根本原因是：在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样。

开发时态，devtime：

  1. 模块划分越细越好
  2. 支持多种模块化标准
  3. 支持npm或其他包管理器下载的模块
  4. 能够解决其他工程化的问题

运行时态，runtime：

  1. 文件越少越好
  2. 文件体积越小越好
  3. 代码内容越乱越好
  4. 所有浏览器都要兼容
  5. 能够解决其他运行时的问题，主要是执行效率问题

这种差异在小项目中表现的并不明显，可是一旦项目形成规模，就越来越明显，如果不解决这些问题，前端项目形成规模只能是空谈。

解决办法

既然开发时态和运行时态面临的局面有巨大的差异，因此，我们需要有一个工具，这个工具能够让开发者专心的在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。

这样的工具，叫做构建工具

这样一来，开发者就可以专注于开发时态的代码结构，而不用担心运行时态遇到的问题了。

常见的构建工具

  • webpack
  • grunt
  • gulp
  • browserify
  • fis
  • 其他

在 npm 的官网 npmjs.com 上，这些构建工具都可以查到，可以使用 npm 来管理它们。

小结

  • 【理解】webpack出现的原因，它能解决什么问题。

webpack 出现是为了解决前端工程化的问题：让我们能够放心地写开发时态的代码，它会把我们写的代码，打包为运行时态的代码。

  • 【操作】快速在终端中打开当前目录
  • 【示例】使用 nodejs 读取指定文件中的数据

准备一个测试文件 test.txt，内容如下：

  1. test

编写一个js文件，用于读取测试文件 test.txt 中的文件内容

  1. const fs = require('fs'); // nodejs 内置模块，用于文件处理
  2. const path = require('path');
  4. // 获取当前引入的文件 test.txt 所在的绝对路径
  5. const abPath = path.resolve(__dirname, "../test.txt");
  7. console.log(abPath); // c:\Users\Lenovo\Desktop\webpack\test.txt
  9. const content = fs.readFileSync(abPath, {
  10.     encoding: "utf-8"
  11. });
  13. console.log(content); // test

fs 和 path 是 node 的内置模块，在 node 课程中会讲解。