ES6模块化 ES module

ES模块化-ES6模块化-ESM-ESModule 目录-入口-由此开始-大纲-总览-概括-枢纽-指导-指引-总领 father:: JS的模块化规范

基本概念:

esm模块概念

1. 模块内部如果不导出, 对外部是隐藏的, 不可见的
2. 只有模块才能导入模块

视为模块的方法:

1. ES6中只会把包含有import或export的脚本视作模块
2. 浏览器环境中在Html的<script>标签中导入js文件时, 使用属性type="module", 即可把该scrpit标签视为模块
3. nodejs环境中, 文件名后缀改为.mjs
4. [base::node.js模块化规范]

esm的导出概念

child::esm 导出模块结构

导出:

导出语法:

child::导出语法

导入

注意:

1. 浏览器中使用ESM导入模块的时候, 是不会自动在node_modules这个文件夹下去寻找模块的
   1. 因为node_modules是node环境下才会使用
   2. 如果非要使用, 则应该明确写出路径

部分导入语法:

从模块中导入部分对象

import {导入对象1 as 存放导入对象的变量名1, 导入对象2 as 存放导入对象的变量名2} from '去后缀的文件名相对路径'

说明

1. as 存放导入对象的变量名1可以省略
2. 去后缀的文件名相对路径
   1. 不能加上.ts这个后缀
   2. 使用相对路径
3. 不能分别导入全部对象, 只能把全部对象作为一个对象全部导入

导入整个模块:

import * as 模块名 from '去后缀的文件名相对路径'

参数说明:

2. 去后缀的文件名相对路径
   1. 不能加上.ts这个后缀
   2. 使用相对路径

默认导入语法:

静态import

import 存放默认导入对象的变量名 from '去后缀模块名的相对路径'

参数说明:

1. 去后缀的文件名相对路径
   1. 不能加上.ts这个后缀
   2. 使用相对路径

动态

child::esm动态导入默认导出

动态导入

child::动态导入

作为类型来导入:

两种方法:

1. 在import 后面紧跟一个type关键字
2. 在import的对象前面紧跟一个type关键字

使用ESM

Typescript

child:: 在ts-node环境下使用ESM