Skip to content

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 去解析对应的文件,因为有些文件浏览器是不认识的。这些知识后面都会讲到。