ESM 模块化标准
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单。
注意
ESM 必须应用在 script 标签 type="module" 下才能够生效,并且必须把项目部署到服务端运行,否则在本地直接双击打开 index.html 文件会报错。VS Code 提供了把项目运行在服务端的插件,如有需要请查看 Live Server
默认导出
标准语法:export default $variable
解析:其中 $variable
指的是要导出的变量名称。
javascript
// index.js
const person = {
name: 'xiaoming',
age: 18
}
export default person
// index.js
const person = {
name: 'xiaoming',
age: 18
}
export default person
按需导出
标准语法:export { $variable1, $variable2 }
解析:其中 $variable1
$variable2
指的是要导出的变量名称,导出多个的写法用逗号分隔。
javascript
// index2.js
const name = 'xiaoming'
const age = 18
export { name, age }
// index2.js
const name = 'xiaoming'
const age = 18
export { name, age }
默认导入
标准语法:import $variable from $path
解析:其中 $variable
指的是要导入的变量名称,名称是可以自定义的,并非要求和导出的时候一样, $path
指的是导入的文件路径。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module">
import person from 'index.js'
console.log(person)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module">
import person from 'index.js'
console.log(person)
</script>
</body>
</html>
按需导入
标准语法:import { $variable1, $variable2 } from $path
解析:其中 $variable1
$variable2
指的是要导入的变量名称,名称必须和导出时一致, $path
指的是导入的文件路径。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module">
import { name } from 'index2.js'
console.log(name)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module">
import { name } from 'index2.js'
console.log(name)
</script>
</body>
</html>
总结
当然不止是能导入 .js
文件,还能导入 .scss
.vue
.png
等等资源文件,基本上都需要搭配 webpack 中的 loader 去解析对应的文件,因为有些文件浏览器是不认识的。这些知识后面都会讲到。