前端工程化之模块化的相关规范

[TOC]

模块化的相关规范

模块化概述：

传统开发的主要问题：

1 命名冲突

2 文件依赖！

模块化开发：

1 模块化开发就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离， 可是能够经过特定的接口公开内部成员， 亦能够依赖其余模块

2 模块化开发的好处： 方便代码的重用， 从而提高开发效率， 而且方便后期的维护

浏览器端模块化规范：

1 AMD

Require.js【已经不能再访问了！】

2 CMD

Sea.js

上面两种浏览器端的模块化规范已经落伍了！

服务器端模块化规范：

1 CommonJS

1 模块分为 单文件模块 与 包

2 模块成员导出： modules.exports 和 exports

3 模块成员导出 ： require(‘模块标识符’)

大-统的模块化规范-ES6模块化

在ES6模块化规范诞生以前，Javascript 社区已经尝试并提出了AMD、CMD、CommonJs 等模块化规范。 可是，这些社区提出的模块化标准，仍是存在必定的差别性 与局限性、并非浏览器与服务器通用的模块化标准，例如：

• AMD和CMD适用于浏览器端的Javascript 模块化

• CommonJs适用于服务器端的Javascript 模块化

所以，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义：

● 每一个js文件都是一个独立的模块

● 导入模块成员使用 import关键字

● 暴露模块成员使用export关键字

====

1.Node.js 中经过babel体验ES6模块化

1 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2 npm i --save @babel/polyfill

3 项目跟目录建立文件babel . config. js

babel. config. js文件内容如右侧代码

舒适提醒：你再执行上面的代码的时候最好在你的工做目录下先执行一下npm init让项目中出现一个package.json的初始化文件！

ES6模块化的基本语法：

1默认导出 与 默认导入：

01 默认导出语法 export default 默认导出的成员

02 默认导入的语法 import 接受名称 from ‘模块标识符’

// 当前文件模块为 m1.js

// 定义私有成员 a 和 b



​    // 外界访问不到变量d ，由于他没有被暴露出去



// 将本模块中的私有成员暴露出去， 供其余模块使用

let a = 10
let obj = {
    name: '小时姑娘',
    age: 23
}

// 默认导出的方式
export default {
    a,
    obj
}

// 导入模块成员

import m1 from XXXX[导入文件的路径]

// 路径最好加上./否则可能会报错!
import m1 from './m1.js'
console.log("lvhang")
console.log(m1.a)
console.log(m1.obj.name)

注意点：

在每个模块中 ， 只容许使用惟一的一次 export default ， 不然会报错！

2 按需导出 与 按需导入

1 按需导出语法 export let s1 = 10

// 按需导出

// 当前的文件模块为 m1.js

// 向外按需导出变量s1

export let s1 = 'aaa';

// 向外按需导出变量s2

export let s2 = 'ccc';

// 向外按需导出方法 say

export function say = function() {

}

2 按需导入语法 import

// 按需导入

// 导入模块化成员 

**import { s1, s2, say } from './m1.js'**

console.log(s1);

console.log(s2);

console.log(say);

脚下留心：

每一个模块中， 可使用屡次按需导入，可是默认导入，只能有惟一的一次！