「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。
在上两篇文章中，我们介绍了CommonJS。本篇文章介绍目前使用最多的ES Module的基本使用。
ES Module的基本使用
ES Module是目前使用最多的模块化方案，现在node也慢慢支持ES Module了。
与CommonJS的不同之处在于：
（1）ES Module采用import与export 关键字来实现模块化，其中export将模块内的内容导出，import将从其他模块导入内容。要注意的是，ES Module用的不是对象，也不是函数。关键字意味着export和import在解析的时候要交给js引擎把这个关键字做解析，解析完才知道这个语句是什么意思。
（2）它采用了编译期的静态分析，并且加入了动态引用的方式。
采用ES Module将自动采用严格模式： use strict。
首先我们在foo.js文件中使用export将name和age这两个变量进行导出。在语句声明的前面直接加上export关键字。这是一种导出方式，其他的导出方式我们在下一篇文章中介绍。
export const name = 'haha'
export const age = 18
在main.js文件中使用import进行导入。import {标识符列表} from '模块'; 注意，这里的{}不是一个对象，里面只是存放导入的标识符列表内容。而且，路径的文件名必须要加后缀.js。因为查找文件的时候， 不会默认帮我们加.js后缀名。之前我们不需要加后缀，是因为在webpack环境会自动加上这个后缀名。如果在脚手架中，webpack会默认帮我们加.js后缀。没有webpack情况下，js引擎加载js文件的时候需要加上.js后缀名找到对应的文件。
import {name, age} from './foo.js'
console.log(name);
console.log(age);
最后我们在index.html中引入main.js。
<body>
<script src="./main.js"></script>
</body>
运行该文件，我们可以在浏览器中发现报了如下错误，不能在模块外使用import关键字。
这是什么原因呢？这是因为默认情况下，上述写得script标签去加载一个js文件的时候，它会把js文件当做普通的js去解析，不允许里面有import关键字，会报上面的错误。
那么我们要怎么告诉它我们要加载的是一个模块，并且需要以模块化的方式去解析代码？我们需要在script标签中加上type属性，告诉它我们要加载的文件是一个模块。
<body>
<script src="./main.js" type="module"></script>
</body>
运行代码，我们发现还是报错。
因为我们是通过本地去加载html文件的（比如一个file://路径的文件），我们会碰到CORS错误，因为javascript模块安全性需要，不允许通过file协议去加载模块代码，根据错误提示我们可以了解到可以通过http请求。
我们需要安装live server插件，它会帮助我们在本地开启一个服务器，index.html，main.js，foo.js等这些资源都在服务器上，当我们向服务器通过http请求的时候会返回index.html文件。
此时，我们可以看到打印出来的结果。
