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

ESM 模块化标准 ​

ESM 模块化标准