前端工程化

1.概念

前端开发的管理工具。

2.模块化和包管理

分解与聚合
函数 文件
问题
1.全局污染
2.依赖混乱

模块化标准

民间标准
commonjs（重要) 运行时
amd
cmd
umd
官方标准
EcmaScript Module ESM （重要) 编译时

commonjs

let xxx=require("a.js");

运行时：
只有运行过后才能确定依赖关系

if(xxx){
	let xxx=require("a.js");
}
else{
	let xxx=require("b.js");
}

ESM 编译时

//这样时不行的，不能在运行时 import
if(xxx){
	import xxx from "a.js";
}
else{
	import xxx from "b.js";
}

实现

浏览器
只支持ESM ,不支持commonjs

表示ESM模块
<script src='a.js' type="module"></script>

node
两种都支持

构建工具

vue-cli,vite,cra,umijs, webpack,rollup,esbuilder

包管理

包：package 一系列模块的集合
函数
文件
包 框架/库
约束代码结构 vue

包管理：
1.从哪里下载
2.如何升级
3.如何卸载
4.如何发布
5.版本控制

包管理工具
npm ,pnpm,yarn

JS 工具链

遇到的问题
1.语言问题
html,css,js
css saas,less,stylus,postcss
js

兼容性，语言缺陷 ，jsx,ts 语言增强

兼容性
API兼容
polyfill:corejs
语法增强：
jsx 转换工具，typescript 转换工具， tsc
语法兼容

整合工具 babel
他的作用是 js 进行兼容，语法增强，用户可以使用插件对特定的语法进行转换，插件太多用户不清楚可以使用预设的情况进行兼容处理。

css

1.语法缺失（循环，判断，拼接）
2.功能缺失（颜色函数，数学函数，自定义函数）

新语言-》编译器 -》css语言
saas/less/stylus css 预编译器

工程问题

构建工具
脚手架

3.流程问题