Vue学习（四十一）——前端模块化相关规范

一、概述

1、什么是模块化？

• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；
• 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。

2、ES6模块化规范

在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

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

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

ES6模块化规范中定义：

• 每个 js 文件都是一个独立的模块
• 导入模块成员使用 import 关键字
• 暴露模块成员使用 export 关键字

3、Node.js 中通过 babel 体验 ES6 模块化

A.安装babel

    打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
    安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill

B.创建babel.config.js

在项目目录中创建babel.config.js文件。

编辑js文件中的代码如下：

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

C.创建index.js文件

在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
console.log("ok");

D.使用npx执行文件

打开终端，输入命令：npx babel-node ./index.js

4、默认导出 与 默认导入

A、默认导出

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

// 当前文件模块为 m1.js
// 定义私有成员 a 和 c
let a = 10
let c = 20
// 外界访问不到变量 d ,因为它没有被暴露出去
let d = 30
function show() {}
// 将本模块中的私有成员暴露出去，供其它模块使用
export default {
 a,
 c,
 show
}

B、默认导入

语法：import 接收名称 from ‘模块标识符’

 // 导入模块成员
 import m1 from './m1.js'
 console.log(m1)
 // 打印输出的结果为：
 // { a: 10, c: 20, show: [Function: show] }

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 。

5、设置按需导入/导出

A、按需导出

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

// 当前文件模块为 m1.js
// 向外按需导出变量 s1
export let s1 = 'aaa' 
// 向外按需导出变量 s2
export let s2 = 'ccc'
// 向外按需导出方法 say
export function say = function() {}

B、按需导入

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

 // 导入模块成员
 import { s1, s2 as ss2, say } from './m1.js'
 console.log(s1) // 打印输出 aaa
 console.log(ss2) // 打印输出 ccc
 console.log(say) // 打印输出 [Function: say]

    //同时导入默认导出的成员以及按需导入的成员
    import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出。

6、直接导入并执行模块代码

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

// 当前文件模块为 m2.js
// 在当前模块中执行一个 for 循环操作
for(let i = 0; i < 3; i++) {
 console.log(i)
}

直接导入：

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