ES6模块的使用实例

ES6模块系统的使用​实例🧀

🌿模块基础

常见的模块化系统有CommonJS、AMD、CMD以及ES6的Modules

​ 一个ES6的模块是一个包含了JS代码的文件

• ES6的模块自动开启严格模式

• 可以在模块中使用 import和export

  ES6将模块的加载细节完全交给了实现

JS运行一个模块时的行为：

1. 解析：引擎实现会阅读模块的源码，并且检查是否有语法错误
2. 加载：引擎实现会（递归的）加载所有被引入的模块
3. 链接：引擎实现会为每个新加载的模块创建一个作用域，并且将模块中的声明绑定填入其中，包括其他模块中引入的

🌵模块的导出(export)

​ 模块中声明的任何东西都是默认私有的，如果想对其他模块Public，必须export那部分代码（最简单的实现方法是添加一个export关键字）

​ 可以在function、class、var、let或const前添加export

​ 当代码是一个模块时，生命的一切都会被封装进模块的作用域，不再会有跨模块或跨文件的全局变量，导出的声明部分则会成为这个模块的Public API，模块里的代码可以访问一些基本的全部变量（Object和Array），如果模块跑在浏览器里可以访问呢document和XMLHttpRequest

//summation.js
export function fn(n){
    if(n===1){
        return 1;
    }
    return n+fn(n-1); 
}

​ 如果觉得需要导出的部分很多又觉得每个导出部分前都加export麻烦，可以只写一行导出的变量列表再用花括号括起来

export {detectCats, Kittydar};

// no `export` keyword required here
function detectCats(canvas, options) { ... }
class Kittydar { ... }

​ 如果导出的变量名恰好和模块中的变量名冲突了，可以给导入的东西重命名

import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

​ 类似的导出的变量也可以重命名（用于同一个变量名导出的两次的场景）

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

🌵模块的导入​​(import)

//index.js
import {fn} from './summation.js'
console.log(fn(3));

​ 如果要导入多个模块的接口，可以写成：

import {fn,test} from "./summation.js"

​ 当运行一个包含import声明的模块，被引入的模块会先被导入并加载，然后根据依赖关系，每一个模块的内容会使用深度优先的原则进行遍历，跳过已经执行过的模块

​ 如果希望某个模块中的所有信息都导入，可以用*导入所有export变量（*需要起一个别名便于后续使用）

​ 当使用import *时，被引入的是一个module namespace object。

import * as info from "info.js";
console.log(info.name,info.mie())

---

• import和export只能写在顶级作用域(块级作用域{ }外面)中，无法在条件语句中使用，也不能在自己写的函数作用域中使用import
• 所有的导入必须指定一个变量名，但无法通过一个循环的动态地引入一堆变量

---

递归模块运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlbCUCoi-1623058428174)(D:\截图\模块递归.JPG)]

---

Ps:在Vscode终端通过npm运行该js文件时，会报错SyntaxError: Cannot use import statement outside a module（需要babel编译才能支持import等高级语法）,此时需要安装babel,创建.babelrc文件并添加部分代码，再修改pakage.json文件中的"scripts"即可。

1. 安装babel

npm install --save babel-core
npm install --save babel-preset-env 
npm install babel-cli -g

2. 创建.babelrc文件并添加部分代码

{                
    "presets": [ 
         "env"   
     ],          
    "plugins": []
 } 

3. 修改pakage.json文件中的"scripts"

   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "babel-node index.js"
    }

报错解释https://www.jianshu.com/p/c88d2d0c299f

🚩

参考博客1

参考博客2