
前端工程化
文章平均质量分 87
学全栈的灌汤包
这个作者很懒,什么都没留下…
展开
-
分析webpack编译结果, 实现__webpack_require__函数
这样我们就是实现了Webpack合并多个模块, 但是当我们读取某一模块的时候, 我们应将它的导出结果缓存起来, 当下一次再导入该模块时, 就不需要再执行这个模块的代码, 直接从缓存中读取导出结果即可, 所以我们需要实现缓存完善上面代码。中的模块函数是使用eval执行的, 这是并且会加上一个注释, 其实这是为了开发者能够在浏览器控制台调试, 由于我们运行的是打包后的代码, 那么报错指向的错误地址就会指向打包后的代码, 是不利于我们调式的;中的key)作为参数, 并运行一个模块, 得到该模块的导出结果。原创 2024-06-04 23:25:11 · 1166 阅读 · 0 评论 -
搞懂什么是跨域?公司在开发中跨域的解决方案是什么?
要想理解跨域,要先理解浏览器的同源策略:同源策略是浏览器中的一个重要的安全策略,它用于限制一个源(origin)的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。如果两个 URL的协议、主机、端口都相同的话,则这两个 URL 就是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是“元组”。在早期的服务器端渲染的阶段,是没有跨域的问题的;原创 2023-07-29 14:00:13 · 564 阅读 · 1 评论 -
vs code新版本,解决感叹号无法生成HTML骨架的方法
新版本取消了叹号, 大家都不适应吧, 这里给大家推荐两个一键生成的方法方式一: 输入可以一键生成html的骨架方式二(个人更喜欢的一种): 输入可以一键生成html骨架, 其实输入敲回车就可以生成了方式三: 选择HTML sample, 同样可以生成HTML骨架............原创 2022-07-13 12:20:29 · 3501 阅读 · 7 评论 -
前端工程化-webpack处理css-less代码的loader
webpack到底是如何对我们的项目进行打包的呢?事实上webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件;从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等);然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析);如果我们打包的文件有css, 那么打包会报一个错误信息, 错误信息告诉我们需要一个loader来加载这个css文件,但是loader是什么呢?那么我们需要一个什么样的loader呢?原创 2022-07-19 09:00:00 · 954 阅读 · 1 评论 -
前端工程化-认识webpack工具-webpack的配置方法
path模块用于对路径和文件进行处理,提供了很多好用的方法。我们知道在Mac OS、Linux和window上的路径时不一样的window上会使用 \或者 \\ 来作为文件路径的分隔符,当然目前也支持 /;在**Mac OS、Linux的Unix操作系统上使用 /** 来作为文件路径的分隔符;那么如果我们在window上使用 \ 来作为分隔符开发了一个应用程序,要部署到Linux上面应该怎么办呢?显示路径会出现一些问题;所以为了屏蔽他们之间的差异,在开发中对于路径的操作我们可以使用 path 模块;可移植操原创 2022-07-18 09:00:00 · 474 阅读 · 0 评论 -
前端工程化-包管理工具npm-yarn-cnpm-pnpm详细介绍以及如何选择
我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构:如果我们分享给世界上所有的程序员使用,有哪些方式呢?方式一:上传到GitHub上、其他程序员通过GitHub下载我们的代码手动的引用;显然,上面的方式是有效的,但是这种传统的方式非常麻烦,并且容易出错;方式二:使用一个专业的工具来管理我们的代码显然,通过第二种方式我们可以更好的管理自己的工具包,其他人也可以更好的使用我们的工具包。包管理工具npm:如何下载和安装npm工具呢?npm管理的包可以在哪里查看、搜索呢?npm管理原创 2022-07-17 09:00:00 · 2176 阅读 · 0 评论 -
JavaScript模块化-ES Module
JavaScript没有模块化一直是它的痛点font>,所以才会产生我们前面学习的社区规范:CommonJS、AMD、CMD等,所以在ECMA推出自己的模块化系统时,大家也是非常兴奋。ES Module和CommonJS的模块化有一些不同之处:ES Module模块采用export和import关键字来实现模块化:了解:采用ES Module将自动采用严格模式:use strict注意: 如果直接在浏览器中运行代码,会报错, 这个报错在MDN上面有给出解释:我这里使用的VSCode插件:Live Serve原创 2022-07-16 09:00:00 · 1122 阅读 · 1 评论 -
JavaScript模块化-CommonJS规范
到底什么是模块化、模块化开发呢?事实上模块化开发最终的目的是将程序划分成一个个小的结构;这个结构中编写属于自己的逻辑代码,有自己的作用域,定义变量名词时不会影响到其他的结构;这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用;也可以通过某种方式,导入另外结构中的变量、函数、对象等;上面说提到的结构,就是模块;按照这种结构划分开发程序的过程,就是模块化开发的过程;无论你多么喜欢JavaScript,以及它现在发展的有多好,它都有很多的缺陷:对于早期的JavaScript没有模块化来说,确确实实带来原创 2022-07-15 09:00:00 · 621 阅读 · 1 评论 -
前端工程化----Node.js基础篇
官方对Node.js的定义:也就是说Node.js基于V8引擎来执行JavaScript的代码,但是Node.js中不仅仅只有V8引擎:Node.js的快速发展也让企业对Node.js技术越来越重视,在前端招聘中通常会对Node.js有一定的要求,特别对于高级前端开发工程师,Node.js更是必不可少的技能Node.js安装Node.js是在2009年诞生的,目前最新的版本是分别是LTS16.15.1以及Current 18.4.0:LTS版本:(Long-term support, 长期支持)相对稳定一些原创 2022-07-14 09:00:00 · 827 阅读 · 0 评论