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

目录

• 模块化的相关规范
  • 模块化概述：
    • 传统开发的主要问题：
      • 1 命名冲突
      • 2 文件依赖！
    • 模块化开发：
      • 1 模块化开发就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离， 但是可以通过特定的接口公开内部成员， 亦可以依赖其他模块
      • 2 模块化开发的好处： 方便代码的重用， 从而提升开发效率， 并且方便后期的维护
  • 浏览器端模块化规范：
    • 1 AMD
    • 2 CMD
  • 服务器端模块化规范：
    • 1 CommonJS
      • 1 模块分为 单文件模块 与 包
      • 2 模块成员导出： modules.exports 和 exports
      • 3 模块成员导出 ： require(‘模块标识符’)
  • 大-统的模块化规范-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文件内容如右侧代码
  • ES6模块化的基本语法：
    • 1默认导出 与 默认导入：
      • 01 默认导出语法 export default 默认导出的成员
      • 02 默认导入的语法 import 接受名称 from ‘模块标识符’
        • 注意点：
          • 在每一个模块中 ， 只允许使用唯一的一次 export default ， 否则会报错！
    • 2 按需导出 与 按需导入
      • 1 按需导出语法 export let s1 = 10
        • 注意:每个模块中，可以使用多次按需导出!
      • 2 按需导入语法 import { s1 } from ‘模块标识符’
        • 脚下留心：
          • 每个模块中， 可以使用多次按需导入，但是默认导入，只能有唯一的一次！
    • 3 直接导入并执行模块代码

模块化的相关规范

模块化概述：

传统开发的主要问题：

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文件内容如右侧代码

const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
]

module.exports = { presets }

温馨提醒：你再执行上面的代码的时候最好在你的工作目录下先执行一下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

// 向外按需导出变量s3
export let s3 = 'dapeng';

// 向外按需导出变量s2
export let s2 = 'lvchengxin';

// 向外按需导出方法 sayName

export let sayName = function() {
    let name = 'hahaha';
    console.log(name);
};

注意:每个模块中，可以使用多次按需导出!

2 按需导入语法 import { s1 } from ‘模块标识符’

// 按需导入

// 导入模块化成员 
// 路径最好加上./不然可能会报错!
// 可以为导入的变量取别名！
// 使用的时候用别名就行了！
import m1, { s2, s3, sayName as sh } from './m1'
console.log("lvhang")
console.log(m1.a)
console.log(m1.obj.name)


console.log(s2)
console.log(s3)
console.log(sh)

脚下留心：

每个模块中， 可以使用多次按需导入，但是默认导入，只能有唯一的一次！

3 直接导入并执行模块代码

有时候， 我们只想单纯的执行某个模块中的代码， 并不需要得到模块中向外暴露的成员， 此时， 可以直接导入并执行模块代码。

// 当前文件模块为m2

// 在当前的模块中执行一for循环的操作！
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 直接导入并执行模块化代码
import './m2'