一,前端工程化?
前端开发:小白眼中的前端开发:美化页面bootstrap,操作DOM使用jQuery,快速实现网页布局效果:layUI 插件+组件库。
实际中的前端开发(四个现代化):
1.模块化:(js模块化,CSS模块化)
2.组件化:(有的东西会被复用如layUI已经写好了代码,我们恰好可以使用到,这就是复用,直接复制粘贴,ui结构的组件化)
3.规范化:(目录结构的划分(如images文件,JS文件,CSS文件),编码规范化(const userInfo={name:"sh",age:20})规范化的(如:关键部位有空格,缩进,命名等))是一个团队最好保证团队的一致性,标准型。***
4.自动化:(自动化构建:写完一个页面,每次完成后保存自动刷新页面,自动部署)
前端工程化:按照项目的标准来进行开发应用。
企业中的Vue和react都是基于工程化(webpack)的方式进行开发。
好处:前端开发自成体系,有一套标准的开发方案和流程,更加的使我们团队变得更加的高效和有竞争力。
前端工程化的解决方案:
webpack(工程的解决方案,工具把概念落到实际)
二、webpack的解决方案
主要功能:代码压缩混淆(缩小体积),处理浏览器的JS的兼容性(在那一版的浏览器都行在旧版本中的IE6,7,8,如let语句)程序员更加大胆的去写高级代码(开发效率高)webpack会转化为低级语言,没有兼容性的,谁懂能看懂,性能优化,好处:程序员把工作中心放在开发效率和可维护性。
体验webpack:(提出需求--->发现问题---->webpack来解决)
1.列表隔行变色案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔行变色</title>
<script src="../dist/main.js"></script>
<!-- src代表着程序员的源代码文件 -->
<!-- 根据node.js下载包文件,我们在根目录里面输入cmd,运行num install(i) jquery -S即可下载第三方的包了 -->
<!-- "dependencies": {
"jquery": "^3.6.1"
} -S明确告诉大家把这个包放在了package.json里的dependencies里面 1.之前咱们会的用法2.ES6里的导入导出-->
<!-- -S简写等效--save -->
<!-- SyntaxError:语法错误,刚才我们使用了高级语言,使用webpack来解决 -->
<!-- 安装webpack的两个包:1. npm install webpack@5.42.1 webpack-cli@4.7.2 -D ①第一个@是用作指定版本号的 ② -D(是--save-dev的简写) "devDependencies": {
"webpack": "^5.42.1",
"webpack-cli": "^4.7.2"
} -D的明确告诉npm把包放在节点"devDependencies-->
<!-- dependencies(-S)项目在开发和上线的时候都要使用这个,devDependencies(-D)只在开发阶段使用 自己可以与npm.js官网搜索webpack就可以-->
<!-- // 只安装不配置是不行的--->
<!-- 1111.根目录创建一个配置文件webpack.config.js{可以看见这个文件里的module.exports(node.js)里的导出一个配置对象为webpack服务:mode:{1.development(开发模式)2.production(生产上线)}} -->
<!-- 2222.在package.json的节点scripts(里边的可以被运行)节点下,新增“dev”脚本:“webpack”(自己起的)z终端(cmd)通过npm run dev 来指定对应脚本执行真正命令(webpack)(终端的表达有asset生成资源(main.js(包含index.js和 node_modules))) 会发现多了一个dist文件里面的main.js(是将我们的index.js的进行了翻译,他是没有兼容性的,所以我们使用的就是他了)发现成功实现了解决了-->
<!-- 扩展如何搜索快捷键 -->
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>