webpack前置知识1(模块化开发)

webpack前置知识1(模块化开发)

新建 模板 小书匠 

在开始对模块化开发进行讲解之前，我们需要有这么一个认识，即

在没有过多第三方干扰时，成本低收益高的事物更容易获得推广和信赖。

模块化开发就是这样的事物，它具有以下优点

• 1.开发效率高
  • 1.1各模块并行开发
  • 1.2复用性高
• 2.可维护性高

上面的文字生涩难懂，到底什么是模块化开发？我们知道一个成熟稳健的社会，模块化是必然的，即社会分工是明确的。最初的网页开发如同原始社会那样，仅需要些许动画和表单需求即可满足，这时的代码量非常小，即社会分工不明确。这里用原始社会和工业社会的模型作为模块化进行类比。

1.重复性工作多原始社会的食物来源就是采摘和狩猎，也仅此两种工作。
2.业务容易重叠 相邻的部落之间为了食物，必定会争夺，发生战争。
3.流程固化 比如,经验老道的猎手和农民能获得的食物多，但这些老农和猎手不能被替代，一旦变更他们的职位，食物总量必然减少。

而采用机械化的工业社会，将业务流程分割成一个个模块，然后把重复性工作交给了机器，这样大大的提高了生产效率。所以就引出了【为什么要模块化】的话题

为什么要模块化

非模块化：重复性工作多，业务容易重叠出错，流程固化【js调用顺序不能乱】。那什么是模块化？

---

什么是模块化

模块化的核心：导出和导入

---

常见的模块化规范有ComgnonJS、AMD、CMD，也有ES6的Modules，我们应该选择哪种呢？

因为最火的打包工具webpack 依赖于node,而node的底层规范是CommonJS，所以了解CommonJS是有必要的，而ES6是未来的前端规范，所以这里我们采用的commonjs和ES6模块规范。

模块化的应用

将每一个文件当成一个模块。因为它拥有自己独立的作用域，变量，以及方法等，并且它对其他的模块都不可见。

CommonJS

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

CommonJS的导出

CommonJS的导出

module.exports其本质是一个数组，每个导出的模块即是它的一个数组成员。

module.exports=【moduleA,moduleB,....moduleX】;

CommonJS的导入

CommonJS的导入

require的本质是获取module.exports数组中的某个数组成员，比如要获取moduleA,如上图中所示。

ES6的导出export

如果将整个模块导出，使用语法

export default {}

单独导出某个方法和属性，与CommonJS的导出没区别

//info. js 
export let name =' 张三'
export let age=15
export let height=172

ES6的导入import ... form

单纯导入一个整个文件，即导入default时，语法如下

import 对象名称 from '模块路径'

单纯导入某个方法和属性时

//import {对象函数/属性，对象函数/属性} from '模块路径'

//math.js导出2个方法
export function add(){}
 export function sub(){}
 
 //导入如下
 import {add, sub} from '模块路径'