搜索到
8
篇与
的结果
-
前端模块化——CommonJS、AMD、CMD、ESM 前端模块化——CommonJS、AMD、CMD、ESM前端模块化的概念：前端最初是没有模块化的，都是通过script引入，然后这个script引入的文件就会被全部加载，开发者需要看这个完整的script，才能知道这个文件的作用。模块化就是一个单独的script文件就是一个独立的模块，通过向外暴露特定的导出变量和函数，开发者不用关心文件里的其它内容是怎么实现的，提高了代码的复用率和开发效率。模块化的基础是js函数。前端模块化的发展历程：前端没有模块化-nodejs出现（node使用commonjs实现前端模块化）-CommonJS用同步的方式加载模块，在浏览器里限于网络原因，就需要使用异步加载。所以出现了AMDjs和CMD（他们都是为了解决异步加载的问题）-后来的ESM，新的浏览器标准，之前的amd和cmd只是补丁，esm是重新定义了标准，成为浏览器和服务器通用的模块解决方案其模块功能主要由两个命令构成：export和 import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。结语 commonjs是旧的方式，amd和cmd是commonjs的补丁。esm是新的标准，未来是esm的。commonjscommonjs用同步的方式加载模块。主要是在node里使用，是服务器端使用方法。有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用 module.exports定义当前模块对外输出的接口（不推荐直接用 exports），用 require加载模块。exports和 module.export区别：module.export： 每个模块内部，module变量代表当前模块，这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实就是加载该模块的exports属性。既可以使用 .语法，也可以使用 =直接赋值。exports：为了方便，node为每个模块提供了一个exports变量，指向module.exports。这等同于在每个模块头部，有这么一行代码：var exports = module.exports;所以不能直接将exports指向一个值，这会切断 exports 与 module.exports 的联系（但是可以用module.exports来指向一个值）./demo.js var age = 7; var sayHello= function (name) { return "hello " + name; }; exports = age; //不要这么干。这么做会切断exports与module.exports的联系 AMDCommonJS用同步的方式加载模块。在服务端，模块文件都存放在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用 require.config()指定引用路径等，用 definde()定义模块，用 require()加载模块。首先我们需要引入require.js文件和一个入口文件main.js。main.js中配置 require.config()并规定项目中用到的基础模块。 /** 网页中引入require.js及main.js **/ <script src="js/require.js" data-main="js/main"></script> /** main.js 入口文件/主模块 **/ // 首先用config()指定各模块路径和引用名 require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", //实际路径为js/lib/jquery.min.js "underscore": "underscore.min", } }); // 执行基本操作 require(["jquery","underscore"],function($,_){ // some code here });ES6 ModuleES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和 import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 /** 定义模块 math.js **/ var basicNum = 0; var add = function (a, b) { return a + b; }; export { basicNum, add }; /** 引用模块 **/ import { basicNum, add } from './math'; function test(ele) { ele.textContent = add(99 + basicNum); }总结CommonJs、AMD、CMD 是js模块化开发的规范，对应的实现是Node.js、require.js、sea.jsCommonJs主要针对服务端，AMD/CMD/ESModule主要针对浏览器端，容易混淆的是AMD/CMD。（顺便提一下，针对服务器端和针对浏览器端有什么本质的区别呢？服务器端一般采用同步加载文件，也就是说需要某个模块，服务器端便停下来，等待它加载再执行。这里如果有其他后端语言，如java。而浏览器端要保证效率，需要采用异步加载，这就需要一个预处理，提前将所需要的模块文件并行加载好。）AMD/CMD区别，虽然都是并行加载js文件，但还是有所区别，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。(1)加载方式：AMD异步加载，CMD同步加载。(2)依赖声明：AMD需要在模块定义时声明依赖，CMD可以在需要时再引入依赖。(3)适用环境：AMD更适用于浏览器环境，CMD更适用于服务器端环境。(4)实现工具：RequireJS是AMD规范的主要实现，而SeaJS是CMD规范的主要实现。AMD/CMD的优缺点.一个的优点就是另一个的缺点， 可以对照浏览。AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。AMD缺点：并行加载，异步处理，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。CMD缺点：执行等待时间会叠加。因为每个文件执行时是同步执行（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。（PS：重新看这篇文章，发现这里写的不是很准确。确切来说，JS是单线程，所有JS文件执行时间叠加在AMD和CMD中是一样的。但是CMD是使用时执行，没法利用空闲时间，而AMD是文件加载好就执行，往往可以利用一些空闲时间）CommonJS 和 ES Module 区别：CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用如何使用？CommonJs 的话，因为 NodeJS 就是它的实现，所以使用 node 就行，也不用引入其他包。AMD则是通过 <script>标签引入require.js，CMD则是引入sea.js -
rollup.js的个人理解 rollup也是一款静态资源打包工具。作用和webpack一样，但是比webpack轻量化。rollup和webpack的区别：webpack是一个静态资源打包器，从入口文件开始，webpack仅支持打包js，我们通过一个个loader打包其他不同类型的资源，通过插件实现额外的功能，最终将项目的所有文件编译成一个或多个文件输出出去。rollupjs也是静态资源打包成一个文件，rollup因为使用的前端模块化的方式是esm，于是有了tree shaking 特性。webpack由于要兼容commonjs，commonjs引入是全量引入，所以没有tree shakingwebpack 功能更加丰富，并且通过丰富的插件生态，如代码分割，适用于复杂场景和项目。rollup 更加轻便，它通过静态分析和Tree Shaking等技术，将代码模块按需打包，消除未使用的代码，以减小最终生成的包的体积。rollupjs 使用静态分析在编译时就确定依赖关系（所以在打包时会出现一下额外的依赖定义）webpack是运行时才进行依赖查找，所以在速度上会比较慢vite 是webpack的一个替代品。出现的原因是esm的出现和浏览器对esm的支持，使得在开发时运行不需要真正的编译，浏览器可以直接编译esm，所以在开发环境里，vite只是使用提供了开发服务器。生产环境下，vite 使用rollup进行代码编译。为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。vite最大的特点是：冷启动热更新，生产环境用rollup，所以是tree shaking和静态分析。Tree ShakingTree Shaking技术其实就是代码按需打包技术，就是在打包过程中，只打包实际使用的代码，从而减少打包的体积。Tree Shaking的基础，我个人理解Tree Shaking的技术基础就是esm，正是esm的特性（具体如下），所以在打包过程中，可以做到区分代码是否用到。 Tree Shaking利用esm的特性：导入导出机制：ESM输出的是值的引用，这意味着如果模块内部的变量值发生变化，这些变化将反映到使用该变量的外部环境中。CommonJS输出的是值的拷贝，即使模块内部的值发生变化，外部环境中拷贝的值不会受到影响。依赖加载（解析）机制：ESM是编译时输出接口，而CommonJS是运行时加载。这意味着ESM在代码静态解析阶段就确定了模块的依赖关系，而CommonJS在运行时才解析模块依赖。ESM的import命令是异步的，而CommonJS的require()是同步的。这意味着ESM在加载模块时会分开模块的构建、实例化和执行，而CommonJS会同步加载整个模块Tree Shaking实现步骤（以Rollup的Tree Shaking实现方式举例）1. 识别依赖关系 ：在打包过程中，工具（如Rollup）会分析每个模块中的导入和导出语句，构建出一个模块依赖图。这个图记录了每个模块之间的依赖关系。2. 标记被使用的代码 ：通过静态分析技术，工具会遍历依赖图，并标记哪些变量、函数、类等被实际使用了。这些标记可以是通过变量引用、函数调用等方式进行识别。3. 剔除未使用的代码 ：根据标记结果，工具会将未被使用的代码从最终生成的文件中剔除掉。这些未使用的代码可能是整个模块、模块中的某些函数或类等。4. 优化输出结果 ：在剔除未使用代码后，工具会对输出结果进行进一步优化。它可能会进行变量重命名、函数内联等操作，以进一步减少文件大小和提高执行效率。Tree Shaking原理的核心在于静态分析和标记未使用代码。通过对模块依赖关系的分析，工具可以确定哪些代码是被实际使用的，哪些是未使用的。这种静态分析是在编译时进行的，因此可以在打包过程中进行优化，而不需要运行时的额外开销。需要注意的是，Tree Shaking只能消除那些在编译时可以确定未使用的代码。对于动态导入、条件导入等情况，工具可能无法准确判断哪些代码会被使用。因此，在使用Tree Shaking时，开发者需要注意编写可静态分析的代码，以确保最终生成的文件能够得到有效优化。由于是静态分析，所以我们在写代码的时候，需要注意自己的写法，简单来说，尽量的使用最小导入，例如，下面两个代码打包是不一样的：// 直接导入整个对象 import _ from 'lodash'; console.log(_.max([4, 2, 8, 6])) // 具名导入具体的函数 import { max } from 'lodash'; console.log(max([4, 2, 8, 6]))
-
前端工程化的思考 前端工程化定义前端工程化。是一种将软件工程的方法和思想应用于前端开发的实践，它旨在提高开发效率、降低开发成本、保证代码质量，这包括使用构建工具、实行模块化和组件化、自动化和持续集成等技术。前端工程化关注于开发流程的规范化、标准化，以及通过工具和框架解决前端开发和前后端协作中的问题。例如，使用脚手架工具、代码规范和格式化、热更新和Mock数据、自动化测试和持续部署等都是前端工程化的体现。模块化。指的是将复杂的程序或系统拆分成多个独立的模块，每个模块负责特定的功能，这些模块可以单独开发、测试和维护，模块化有助于提高代码的可维护性、复用性和管理性。在前端开发中，模块化通过将代码拆分为小的、独立的文件来实现，这些文件通过统一的拼装和加载来协同工作。JavaScript的模块化规范，如CommonJS，定义了模块的作用域和加载机制，有助于避免全局作用域的污染和提高代码的复用率。组件化。是模块化的一种表现形式，它专注于用户界面的拆分和维护。组件化将页面结构、样式和行为分离成独立的组件，每个组件都有自己的工程目录和所需资源，组件之间可以自由组合，形成完整的页面。这种方法的优点在于提高代码的复用性和维护性，同时也方便了多人协作和项目的扩展。总的来说，前端工程化、模块化和组件化共同促进了前端开发的效率和质量，它们是现代前端开发中不可或缺的部分。前端工程化是指将前端开发中的项目管理、构建、测试、部署等环节进行规范化和自动化，以提高开发效率、代码质量和团队协作能力的一种开发方式。具体来说，前端工程化涉及以下几个主要方面：项目架构：对项目的文件组织结构、模块划分、代码规范等进行规范化。良好的项目架构可以提高代码的可维护性和可扩展性。版本控制：使用版本控制系统（如Git）对代码进行管理，实现多人协作、版本回退、分支管理等功能，保证代码的版本和历史可追溯。自动化构建：使用构建工具（如Webpack、Gulp）将源码编译、压缩、合并、打包等操作自动化处理，以生成可部署或上线的最终代码。组件化与模块化：通过将页面拆分成一个个独立的组件和模块，可以更加灵活地组合和复用代码，提升开发效率和代码可维护性。组件化是在设计层面上，对于UI的拆分；而模块化是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。自动化测试：自动化测试可以大大提升测试效率，减少人为错误。前后端分离与全栈工程化：前后端分离已经成为了现代Web开发的主流架构，前端和后端可以独立开发、独立部署、独立测试，大大提升了开发效率和产品质量。同时，全栈工程化的思想也在逐渐普及，即前后端使用统一的工程化标准和流程，进一步提升团队协作效率。前端工程化的目标是提升团队协作效率、提高代码质量、降低维护成本，并使前端开发更加规范和可持续。同时，它也能够适应快速迭代、多平台适配的现代前端开发需求。
