前端工程化知识点串联

原则猫
96 阅读5分钟

1.前端工程化发展历史

学习原则就是，太过理论的不要记忆，学习思路，理解原理，基础知识实践中去总结，记忆讲解思路，和核心问题

目标

  1. 到底解决了什么问题

核心

  1. 提升效率，规范，性能

模块化

解决的是项目量级，代码量大幅度增加的问题。

前端的模块化其实就是整个工程化的前提 这个模块化的思想其实就是拆分解耦思想，把整个项目进行拆分为多个模块

体现的是单一职责：对外开放，对内隔离

模块化发展历史

  1. 早期就是通过自执行函数解决了模块化的问题。，但是这样没法去解决这个模块之间依赖，因为这个太过于相互隔离恶龙
  2. namSpace方式来解决，但是能通过引用的方式来修改对象里面的值
  3. 那核心问题就是怎么去解决，首先这个问题其实就是这个，作用域问题---分类---》通过函数作用域解决

问题

  1. 函数作用域变量和对象属性之间什么区别呢？---记录这个还是有点不清楚
  2. 函数内部定义了一个变量，然后返回它，为什么可以修改？
  3. 本质是js是一对于基础数据类型作为参数或者返回，实际是变量的拷贝，而不是变量本身。

模块化详解（下）

  1. 自执行模块，如何去做实现自定义依赖其实就是怎么去串联不同自治性模块，本质还是利用window全局对象挂载进行实现的，不过里面这个具体怎么做的，不太理解。

commonjs规范

  1. 问题是到底为什么叫做commonjs规范
  2. nodejs下每个模块，默认都是自己独立的作用域
  3. 它的执行顺序是什么，同步的
  4. 那原理是什么就是自执行函数: require还有里面的 参数都是直接传入的，这个我不理解。
  5. 本质是什么： 其实就是一种规范，如何去理解。

commonjs 模块打包

  1. 就是意思是如果想让commonjs里面的内容生效需要进行打包，
  2. 打包后commonjs本质是什么东西在生效---其实还是自执行函数 通过调用call方法来执行。但是里面的代码细节比较多，我可能需要debugger一下

AMD规范

1， 解决的异步加载模块

CMD规范

  1. 专门用于浏览器端

ESmodel

  1. 核心：设计理念就是编译时，确定模块依赖关系，这样做有什么意义呢
  2. ESmodel 创建的思想是基于静态化，那么为什么要静态化呢，为了保证模块间的依赖关系不随着运行时而动态改变，这就是它设计的核心原因。

commonjs 和Esmodle

  1. 什么叫做输出的值是值的拷贝，es6是值的引用，原因是什么，解决了什么问题
  2. 怎么去验证这个所谓的值的拷贝和值的引用。
  3. 通过导出一个变量，如果修改后，再去访问还不变说明这个是值的拷贝
  4. es6model是支持异步使用，但是又是为了什么呢。
  5. 对于commmjs里面的this指向其实本质就是导出的对象，？
  6. 里面的问题在于，到底为什么各自规范使用拷贝或者同步，异步加载的原因是什么？

那么前端模块也就是以上这些commonjs，es6model amd 等，里的不足 有哪些：模块化难以直接复用，比如a模块在另一个项目里面，无法直接使用。

性能差，如果出现大规模模块，确实会比较卡

怎么解决

npm

核心：模块管理 原理： 创建一个模块，然后再去安装模块，发布，不是很理解

Webpack

核心： 对代码进行拆分，合并 理念：资源都是模块，统一进行打包处理，其实本质思想，还是拆分解耦的思想

image.png

其实就是通过将之前原本需要挨个打包的模块，转化为先到entry。js里面去分析依赖图，然后再去统一打包到bundle。js里面的

Webpack 快速入门

  1. 其实研究一下webpack 打包后的产物，就会发现其实依然是在用自执行函数，从而实现内部变量对外隔离，其实本质都是一样的。

sourceMap

  1. Devtool此选项控制是否生成，以及如何生成 source map。

  2. loader 用于对模块的源代码进行替换.替换为webpack能够处理的js代码
  3. 第一遍学习， 先不要过多涉及源码，主要是要去思考里面的思路，拆解，做事原则，这些先学到手。
  4. 那到底什么是sourceMap呢。

loader

  1. 那什么时候要自定义loader 呢，比如，我现在想打包一个我自定义的文件，现有不满足，回归定义，对源代码替换，我理解就是替换成，能被浏览器识别的语言 。

编写loader 的原则 1.

  // source 为compiler 传递给 loader 的一个文件的源内容

  // 该处理函数需要返回处理后的内容
    return source
}
  • source：资源输入，对于第一个执行的 Loader 为资源文件的内容；后续执行的 Loader 则为前一个 Loader 的执行结果，可能是字符串，也可能是代码的 AST 结构；
  • sourceMap: 可选参数，代码的 sourcemap 结构；
  • data: 可选参数，其它需要在 Loader 链中传递的信息，比如 posthtml/posthtml-loader 就会通过这个参数传递额外的 AST 对象。
  • 其实loader本质上就是将文件里面的内容进行转换罢了，没有什么

内联Loder 不常用，也build推荐

Plugin

  1. 生命周期功能的定制：怎么理解，还有里面的钩子，是个什么概念。
  2. hooks 类比react hooks.
  3. 源码不太理解
  4. 本质：webpack 插件是一个具有 apply 方法的 JavaScript 对象。
  5. 原则，通过钩子函数，获取到当前bundle.js里面的文件，然后再去进行修改
avatar
文章
阅读
粉丝