首页 > 其他分享 >前端工程化(理解篇)

前端工程化(理解篇)

时间:2024-03-25 10:22:45浏览次数:18  
标签:依赖 前端 html js webpack 理解 工程化 css

工程化的背景
项目发展文件越来越多,单纯的html+js+css+资源的模式文件模式不利于开发并且文件依赖比较混乱,最原始的js,css(主要这2个)html不够强大。

工程化的作用
1增强原始语法,补充语法缺陷提供更强的api与语法糖。(less,es6,xml...)
2有序管理依赖,不再单纯通过index.html script引入,而是通过packj.son ESmoudel NPM一套环境与规范有序管理。(npm是社区资源环境,pack.json从环境下载到,ejs规范工程里import,exp依赖关系使用)
3生成有利于开发的文本结构,这里由webpack完成,webpacck打包后j将开发结构变为html+js+css+资源的模式文件模式。记住webpack只做这一件事 (vue,react这些脚手架是webpack的二度封装可以理解为webpack 加内置的一些依赖 并且隐藏了一些不可修改的文件)

工程化依赖的分类
1 hcj 通过 pollyfill 增强api可以理解成一些封装的方法。写了一个新的语法浏览器/服务器肯定是不识别的。这时候需要将这些新的语法转翻译原始的,就跟使用方法要有封装文件一样。
就需要管理这些依赖包 专门负责转译的平台。

1 html略 ,
2 js 平台 bable(管理插件/垫片的) 增强;
3 css 通过 postocss 增强;
bable 和 postocss 会预装插件与垫片 集成环境 。

引人依赖 -->bable / postocss(集成环境)-->用于打包的的语言
过程 将js/css 变成 ATS 树结构(便于遍历),再转换为js/css 再转化过程中添加 插件处理。

环境问题 :node 环境(express ),浏览器环境 ,开发工具环境 (只认hjc 不认 增强语法 这就是构建工具的意义)

其他: cli 如 npm-cli vue-cli 是指令交互 有依赖要调用里面的额api 需要这些指令用于用户交互。
总结
hcj ->ejc依赖增强语言 - >bable/postcss (平台其实也是依赖 管理依赖的依赖 ) -> 构建工具webpck 平台 - >二次封装 脚手架

--:关键词 依赖 插件 垫片 集成管理 构建工具 ( webpack ) cli ast npm ems模式 模块化import 预装编译器

标签:依赖,前端,html,js,webpack,理解,工程化,css
From: https://www.cnblogs.com/xiaozu75/p/18093722

相关文章

  • (小实验)理解编译原理:一个四则运算的解释器
    在前面的课程中,我在JavaScript和CSS的部分,多次提到了编译原理相关的知识。这一部分的知识,如果我们从编译原理“龙书”等正规的资料中学习,就会耗费掉不少的时间,所以我在这里设计了一个小实验,帮助你快速理解编译原理相关的知识。今天的内容比较特殊,我们来做一段详细的代码实验,......
  • 用生动的语言讲mysql索引机制与B+树形象化理解
    索引,index,是什么呢,假如说,没有索引,比如你要点名,你就得挨个问,你是不是某某某,效率奇低,但是,当他们有了独一无二的号数或者名字,就可以免于追寻,一觅即中,这就是索引存在的意义但是,凡事有利有弊,索引增加了查询的效率,但是却降低了增删改的效率,比如说,班级加入一名新同学,你还要给他一个号数,......
  • 基于前端技术实现的全面预算编制系统
    前言在现代商业环境中,预测销售数据和实际成本是每个公司CEO和领导都极为重视的关键指标。然而,由于市场的不断变化,准确地预测和管理这些数据变得愈发具有挑战性。为了应对这一挑战,建立一个高效的系统来管理和审查销售数据的重要性不言而喻。今天小编就将为大家介绍一下如何使用葡......
  • 【前端素材】推荐优质多用途生活家具购物商城网站设计Glee平台模板(附源码)
    一、需求分析在线生活家具商店网站是指专门销售各类家具和家居用品的网上商店。这类网站提供用户浏览、选择并购买各种家具产品的平台。以下是在线生活家具商店网站的一般功能:产品展示与购买: 网站展示各种家具产品,如沙发、床、桌子、椅子、柜子等,用户可以查看详细信息、图......
  • 【前端素材】推荐优质多用途肉类品商城网站设计Meatza平台模板(附源码)
    一、需求分析多用途肉类品商城网页是一个在线平台,专门销售各种肉类及相关产品的电子商城。以下是这类网页通常具备的具体功能:产品分类:网页会根据不同种类的肉类进行分类,如牛肉、猪肉、禽类、海鲜等,方便用户查找所需产品。产品展示:网页会展示各种肉类产品的图片、价格、产......
  • 前端学习-vue视频学习013-pinia
    尚硅谷视频教程了解pinia集中式状态(数据)管理的工具,主要管理各组件之间的共享数据准备一个效果学到的几个点html下拉选择框,可以使用v-model双向绑定v-modle获取的值为字符串,可以写为v-model.number,会尽量转为数字<selectname="num"v-model.number="n"><optionval......
  • 05-快速理解SparkSQL的DataSet
    1定义一个数据集是分布式的数据集合。Spark1.6增加新接口Dataset,提供RDD的优点:强类型、能够使用强大lambda函数SparkSQL优化执行引擎的优点可从JVM对象构造Dataset,然后函数式转换(map、flatMap、filter等)操作。DatasetAPI在Scala和Java中可用。Python不支持DatasetAPI,......
  • 【Linux】对进程地址空间的理解
    一、关于进程地址空间的简单理解         进程地址空间其实是分了很多个区域的,区域划分的本质就是区域内的各个地址都是可以使用的。如同下面这个图所示:        无论是环境变量的地址还是环境变量表的地址,所存放的地址都在栈的上部。这里的已初始化数据和......
  • 【微前端】微前端的零信任(Zero-trust)机制应用
    【微前端】微前端的零信任(Zero-trust)机制应用目录【微前端】微前端的零信任(Zero-trust)机制应用零信任如何应用于前端将零信任扩展到微前端1\.独立的构建过程2\.微前端隔离3\.用于微前端组件的身份验证结论推荐超级课程:Docker快速入门到精通Kub......
  • 个人理解记录 --- 前端篇(持续更新)
    目录Q:CSS相关问题盒模型有哪些?区别是什么?box-sizing的作用什么是BFC?如何创建?有何应用?什么是重绘和回流?如何优化?Q:JS相关问题对Promise的理解Promise对象Promise语法代码Promise方法原型和原型链原型是什么?原型链是什么?二者有什么作用?new关键字都做了什么防抖......