前端工程化

目录

模块化

包管理器

构建工具

脚手架

---

模块化

               1.是为了解决全局污染（全局变量，全局函数）和依赖混乱问题（js引入顺序等问题）。

               2.标准：官方ES Module，社区：CommonJS

               3.mian中定义一个函数

function sum(a, b) {
    return a + b;
}

               4.在html中引用（会导致全局污染）

<script src="./mian.js"> </script>

                5.将模块导出

function sum(a, b) {
    return a + b;
}
export default sum;

                6.模块导入

//模块化
<script src="./mian.js" type="module"> </script>
//导入
import sum from './mian'

                7.导出的js只能在导入的js中使用，不会影响其他的模块，这样就解决了全局污染的问题。模块化同时也解决了依赖混乱问题。每个模块只需要关心自己就可以了。

包管理器

        模块化导致出现许多第三方库，包就是模块的集合比如axios网络通信的请求库。

        包管理器是为了快速下载包，解决了包版本混乱问题。

        官方npm，社区cnpm，yarn。

构建工具

        1.webpack，gulp，esbuild，rollup等；

        2.Webpack 是一个模块打包器，可以分析各个模块的依赖关系，最终打包成 bundle静态文件（js、css、jpg）。 webpack 是一个静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

         3.Webpack

                        1：打包压缩：减少文件网络传输。

                       2：文件指纹：第一次浏览器会缓存一些文件，当我们修改后，浏览器会重新请求，而不是找到已有的缓存文件；（文件内容不变时，文件指纹不变，使用缓存减少网络请求。文件内容改变，文件指纹发生改变，浏览器会请求新的数据）

                        3：开发服务器：修改内容，显示同时修改

脚手架

        1.vue-cli脚

        2.vite

        3.create-react-app