一个模块组织了一组相关的JavaScript代码。模块可以包含变量和函数。模块不过是文件中编写的JavaScript代码的一部分。默认情况下，模块的变量和功能不可用。应该导出模块中的变量和函数，以便可以从其他文件中访问它们。ES6中的模块仅在严格模式下工作。这意味着模块中声明的变量或函数将无法全局访问。
导出模块
export关键字可用于导出模块中的组件。模块中的导出可以分类如下-
- 命名出口
- 默认出口
命名出口
命名出口以其名称区分。一个模块中可以有几个命名的导出。模块可以使用下面给出的语法导出选定的组件-
语法1
//using multiple export keyword export component1 export component2 ... ... export componentN
语法2
另外，模块中的组件也可以使用带有{}绑定语法的单个export关键字导出，如下所示-
//using single export keywordexport {component1,component2,....,componentN}
默认出口
仅需要导出单个值的模块可以使用默认导出。每个模块只能有一个默认导出。
export default component_name
导入模块
要使用模块，请使用import关键字。一个模块可以具有多个import语句。
在导入命名的导出文件时，相应组件的名称必须匹配。
语法：import {component1,component2..componentN} from module_name
但是，在导入命名的导出文件时，可以使用as关键字对其进行重命名。使用下面给出的语法-
import {original_component_name as new_component_name }
可以使用星号* 运算符将所有已命名的导出导入到对象上。
import * as variable_name from module_name
示例：
步骤1-创建一个文件company1.js并添加以下代码-
let company = "TutorialsPoint"let getCompany = function(){return company.toUpperCase()
}let setCompany = function(newValue){company = newValue
}export {company,getCompany,setCompany}
步骤2-创建文件company2.js。该文件使用了company1.js文件中定义的组件。使用以下任何一种方法来导入模块。
方法1
import {company,getCompany} from './company1.js'console.log(company)
console.log(getCompany())
方法2
import {company as x, getCompany as y} from './company1.js'console.log(x)
console.log(y())
方法3
import * as myCompany from './company1.js'console.log(myCompany.getCompany())
console.log(myCompany.company)
步骤3-使用HTML文件执行模块
要执行这两个模块，我们需要制作一个如下所示的html文件，然后在实时服务器中运行它。注意，我们应该在脚本标签中使用属性type =“ module”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script src="./company2.js" type="module"></script>
</body>
</html>