01、模块化概述
当下最重要的前端开发范式,通过复杂代码按照功能不同划分未不同的模块,单独维护的方式,提高开发效率。
02、模块化演变过程
a、早期的模块化以单个文件创建,项目中使用,问题:污染全局作用域、命名冲突、无法管理模块依赖关系
b、命名空间的方式,问题:任然不是最好的解决方式,模块成员任然可以在外部访问、修改
c、IIFE方式,将模块中每个成员放在函数提供的私有作用域中,对于需要暴露给外部的成员,可以通过挂载到全局对象中去实现,内部成员通过闭包的方式访问,外部没法使用,确保了私有变量的安全。
挂在在全局对象上去使用,实现了私有成员的概念
03、模块化规范的出现
04、模块化标准规范 随着技术的发展,前端浏览器和node分别遵循ES Modules 和CommonJS规范
ES Modules最初所有主流的浏览器都是不支持的,随着打包工具的流行,这一规范逐渐开始流行,ES Modules在语言层面实现了模块化
如今绝大多数浏览器开始支持ES Modules
05、ES Module 特性
06、ES Module 导出
07、ES Module 导入导出的注意事项
08、ES Module 导入用法
09、ES Module 导出导入成员
import还可以配合export去使用,将当前的导入结果直接作为当前模块的导出成员
10、Module 浏览器环境 Polyfill
开发环境如何解决运行环境的兼容性问题,Polyfill(让浏览器支持绝大多数支持ES Modules)
比如ie浏览器不兼容
11、Module in Node.j - 支持情况
node.js的8.5版本以后,内部已经以实验特性方式支持ES Modules,目前处于过度状态
node环境中启用ES Modules的实验特性:node --experimental -modules 文件名
在node环境中以ES Modules方式导入一些系统原生的模块
12、ES Module in Node.j - 与 CommonJS 交互
如何在ES Module中载入CommonJS模块
CommonJS 模块始终只会导出一个默认成员
13、ES Module in Node.j - 与 CommonJS 的差异
在nodejs环境中使用ES Modules与CommonJs的差异
在ES Modules是可以打印输出CommonJs的内置模块,CommonJs则不能
nodemon --experimental-modules 文件名 该命令可以让文件自动重新运行代码,省去手动操作
14、Module in Node.j - 新版本进一步支持
code package.json : 创建package.json文件
在package.json中添加"type": "module"字段则可以将mjs拓展名文件改为js,这样项目下所有的js文件默认esmodules方式工作
解决:common.js改成common.cjs
15、ES Module in Node.j - Babel 兼容方案 babel:js主流的编译器,将新特性的代码转化成浏览器支持的代码
在低版本node环境中使用esmodules
安装babel
babel转化代码通过插件去实现的
babel插件按需安装