前端工程化（理解篇）

工程化的背景
项目发展文件越来越多，单纯的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 预装编译器