技术是为了解决问题而存在的,切忌畏惧技术,为了技术而技术。但凡能解决实际问题或者简化问题的技术,就是值得使用的好技术。
什么是工程化:工程化不是一个工具,工程化是一个目标。
工程化主要解决的问题:
- 传统语言或语法的弊端
- 无法使用模块化/组件化方式去处理代码
- 重复的机械式工作
- 无法统一代码风格,无法保证代码质量
- 前端项目依赖后端服务接口支持
- 整体依赖后端项目
工程化的表现:
一切以提高效率,降低成本,质量保证为目的的手段都属于工程化。
工程化内容:
- 脚手架工具开发:项目创建阶段,前端工程化的表现。
- 自动化构建系统
- 模块化打包
- 项目代码规范化
- 自动化部署
脚手架:是一个自动创建项目基础文件,提供项目规范和约定的工具。只是工程化的一部分
- 创建一类项目时,项目会有相同的组织结构,相同的开发范式,相同的模块依赖,相同的工具配置,相同的基础代码等。每次创建项目都有这些相同内容,所以会存在大量重复工作。而通过脚手架工具可以解决这个问题。
常用的脚手架工具:创建项目的基础结构
- vue => vue-cli:
- react => creat-react-app
- angular => angular-cli
自动化构建:一切重复的工作都应该自动化
- 常用的自动化构建工具:
- grunt: 不推荐使用。有非常完善的插件系统,几乎可以实现任何功能。基于临时文件实现,构建速度比较慢。
- gulp:推荐使用。基于内存实现,构建速度相对更快。插件生态也很完善。基于流的自动化构建工具。读取,转换,写入。
- FIS:百度前端团队推出的自动化构建系统。捆绑套餐。初学者适合。
grunt和gulp是早期的自动化构建工具,grunt是基于临时文件,构建速度慢。gulp是基于流,构建速度相对较快。轻量小型的项目还是会使用gulp。通过读取,转换,写入的方式,对代码进行转换,组合,压缩等。形成自动化的任务。而webpack是专注于处理模块化项目的模块打包器。
什么是模块化开发。模块化开发的演变过程。
- 根据功能的不同把代码划分成模块进行单独维护。通过导出导入将多个模块之间进行关联。
- 我们只在开发阶段需要模块化。对代码进行拆分,但是运行阶段需要对代码进行打包整合。
ES Modules 【浏览器的模块化规范】 浏览器和服务器通用。
-
模块化规范:
- 模块化规范有哪些:
- AMD[异步加载模块-AMD推崇依赖前置<在定义模块时要先声明其依赖的模块,AMD加载完模块后,就立马执行该模块>,RequireJs是AMD规范的实现–RequireJS在主文件里是将所有的文件同时加载–RequireJS是外国人开发出来的] ,
- CMD[异步加载模块-CMD推崇依赖就近<只有在用到某个模块的时候再去require,CMD加载完某个模块后没有立即执行而是等到遇到require语句的时再执行>,SeaJS是CMD规范的实现–SeaJS强调一个文件一个模块–SeaJS是国人开发出来的] AMD,CMD最大的区别是对依赖模块的执行时机处理不同
- CommonJs:Node[服务端]的模块化规范。每个模块通过module.exports导出成员,通过require载入模块。require函数会自动创建一个script标签去发送对应的脚本文件的请求并执行相应代码。[同步模块化,在一开始就去加载所有模块信息]
- ES Modules:浏览器的模块化规范。ESM的script会延迟执行脚本 优先渲染页面。ESM通过CORS跨域资源共享方式请求外部JS
- 模块化规范的特点:
- 一个文件就是一个模块。
- 每个模块有自己的私有作用域。
- 自动采用严格模式。this --undefined
- 模块化的优点就是:
- 代码复用性
- 代码拆分。模块之间依赖性小,可以单独维护。
- 模块化规范有哪些:
-
ES Modules:
-
ESM核心功能:
-
导出 export 在模块内对外暴露接口 。导出的成员并不是拷贝数据,而是导出指针引用
export const a = "lg"; import { a} from '' export { foo , bar }; import { foo,bar} from '' export { name as fooname }; import { fooname} from '' export default a; import xx/aa/bb/a from '' //导出一个默认成员,可以直接对它进行重命名导入
-
导入 import 在模块内导入其他模块提供的接口。导入的成员是只读成员
- import导入路径不能省略.js
- 导入时使用相对路径不能省略./
- import * as data from ‘’ 通过data.可以拿到所有成员。
- ESM提供了一个import函数用于去动态导入模块【当模块路径未知时】,返回的是一个promise对象 import(url).then( module => {})
- 将导入模块整合后直接导出
//import {a} from '' //import {b} from '' //export {a,b} export { a} from '' export { b} from ''
-
ESM in Brower:
- Polyfill 解决运行环境兼容性问题–是一个ES Module Loader
- 可以在script标签上添加nomodule属性。这样,loader就只会在不支持某些ESM的浏览器中工作。
- script方式不推荐在生产环境使用,因为是在运行阶段动态解析脚本,效率低。
-
ESM和CommonJS的区别:
-
ESM可以导入CommonJS. CommonJS中不可以导入ESM
-
CommonJS只会导出一个默认成员
-
在CommonJS中,不能使用require导入ESM
- require加载模块是一个同步过程
- require函数可以在代码的任意位置执行
module.exports = { a:'111', //b:[], //c:{} } //exports.a =
-