webpack和模块化

模块化:

模块化是什么?

​ 把复杂的问题分解成相对独立的模块;

作用:

• 模块化已经是现代前端开发不可或缺的一部分;

• 可以降低程序的复杂性,提高代码的复用性,

• 有利于团队协作开发与后期的维护与扩展

模块化的核心

• 独立的作用域
• 如何导出模块内部数据
• 如何导入外部模块数据

独立的模块作用域

一个文件就是模块，拥有独立的作用域，且导出的模块都自动处于 严格模式下，即：'use strict' 模块中的变量 ,处于严格模式下

导出模块内部数据

使用export语句导出模块内部语句

//导出单个特性

export let name1, name2, …, nameN;     //单个导出
export function FunctionName(){...}    // 导出函数
export class ClassName {...}           //导出类

// 导出列表
export { name1, name2, …, nameN };      //对象

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 默认导出
export default expression;                //直接导出
export default function (…) { … }         //导出匿名函数
export default function name1(…) { … }    //导出普通函数
export { name1 as default, … };           // 重命名导出

导入外部模块数据

导入分两种:

• 静态导入
• 动态导入

静态导入

​ 注意: import 语句只能在声明了 type="module" 的 script 的标签中使用

​ 必须在本地服务器才能运行结果(open with live serve)

 <script  type='module'src='js/a.js'></script>
//静态导入
//import 语句 必须放在模块化代码最顶层
 import b from './b.js';
 console.log(b);     //这是b模块导出的数据

​ 注意 静态导入方式不支持延迟加载，import 必须这模块的最开始

 document.οnclick=function(){
    import b from './b.js';
     console.log(b);    //报错   不支持延迟加载
 }

动态导入

有一个类似函数的动态 import()，它不需要依赖 type="module" 的 script 标签。

import 可以像调用回调函数一样动态的导入模块,这种方式调用,将返回一个promise 对象;

document.onclick= async function(){
    //使用import函数 来实现动态导入
     let b= await import ('./b.js') ;   //浏览器必须使用异步,不		然容易死循环
    console.log(b);   // 输出整个模块  是个对象
    console.log(b.default)   //这是b模块导出的数据
}

通过 import() 方法导入返回的数据会被包装在一个对象中， default 输出的是引入模块的内容;

模块化的向下兼容

• CommonJS
• AMD
• UMD
• ESM

无论是哪种模块化规范都要重点关注:

• 独立的模块作用域
• 导入外部模块数据 import
• 导出内部模块数据 export default

CommonJS

CommonJS 规范就是一套偏向服务端的模块化规范，NodeJS 就采用了这个规范。

独立模块作用域

一个文件就是一个模块,拥有独立的作用域;

导出模块内部数据

通过 module.exports 或 exports 对象导出模块内部数据

//b.js
module.exports=module.exports = {
    val:'这是b模块里的内容'
}

导入外部模块数据

通过 require 函数导入外部模块数据

let  b = require('./b');
console.log(b)     //{ val: '这是b模块里的内容' }

​ 注意:想要获取输出的结果必须在终端里输出 node a;

---

总结:

1.模块化是把复杂的问题分解成相对独立的模块;

2他的作用:

• 模块化已经是现代前端开发不可或缺的一部分;

• 可以降低程序的复杂性,提高代码的复用性,

• 有利于团队协作开发与后期的维护与扩展

3.模块化的核心

• 独立的作用域
• 如何导出模块内部数据
• 如何导入外部模块数据

独立的模块作用域就是:

每个文件就是一个独立的模块,模块中的变量默认在严格模式下;

导出模块内部数据:

使用export语句导出模块内部语句;

导入外部模块数据:

有两种:静态和动态;

静态导入

​ 注意: import 语句只能在声明了 type="module" 的 script 的标签中使用

​ 必须在本地服务器才能运行结果(open with live serve)

​ 静态导入方式不支持延迟加载，import 必须这模块的最开始

动态导入

有一个类似函数的动态 import()，它不需要依赖 type="module" 的 script 标签。

import 可以像调用回调函数一样动态的导入模块,这种方式调用,将返回一个promise 对象;

通过 import() 方法导入返回的数据会被包装在一个对象中， default 输出的是引入模块的内容;

模块化的向下兼容有好几种

• CommonJS
• AMD
• UMD
• ESM

无论是哪种模块化规范都要重点关注(都有这三个):

• 独立的模块作用域
• 导入外部模块数据 import
• 导出内部模块数据 export default