@文章来源：拉钩大前端就业训练营-念念
模块化开发及标准规范
模块化
CommonJS 是以同步模式加载模块
-
AMD 规范 require.js
- 使用起来相对复杂
- 模块 JS 文件请求频繁
-
ESmoudles 特性
- ESM 自动采用严格模式，忽略'use strict'
- 每个 ES module 都是运行在单独的私有作用域中
- ESM 是通过 cors 的方式请求外部的 js 模块的
- ESM 的 script 标签会延迟执行脚本
-
ESmodule 导入导出
- export 导出
- export 导出的不是对象字面量的简写
- export default 导出的可以是对象字面量
- import xx from 'xx' 导入
- 导出的是只读的
- 只能出现在最外层作用域
- 使用全局的 import()返回一个 promise
- ployfill -- ESmodule load
- 引入脚本文件到页面中
- node 使用 esmodule
- 修改后缀名为 mjs
- node --experimental-modules xx.mjs
- export 导出
-
ES module 载入 common.js 模块
- ESmodule 可以载入 common.js 模块成 commonjs 只能载入默认成员，不能直接提取
-
新版本 package.json 添加 type:module
- 如果要使用 commonjs 规范修改 cjs
babel 实现兼容
模块化打包工具
- 模块化带来的问题
- esmodules 存在环境兼容问题
- 模块文件过多，网络请求频繁
- 所以前端资源都需要模块化
webpack
- css-loader 将资源文件转换为 js 工作
- 文件资源加载器 file-loader
- webpack 工作模式
- 生产模式下，自动优化打包结果；
- 开发模式下，自动优化打包速度，添加一些调试过程中的辅助；
- None 模式下，运行最原始的打包，不做任何额外处理；
- webpack 模块的加载方式
- 遵循 ES Modules 标准的 import 声明
- 遵循 CommonJS 标准的 require 函数
- 遵循 AMD 标准的 define 函数和 require 函数
- 样式代码中的 @import 指令和 url 函数
- HTML 代码中图片标签的 src 属性
- webpack 插件及其用法见代码
