一、加载文件
script标签需要加入type属性,值为:module.
示例index.html:
<script type="module" src="./js/index.js"></script>
此时浏览器就知道这是一个ES6的模块,并且是异步加载的。script标签在没有添加async或者defer属性的情况下,默认是等到整个页面渲染完成,再执行模块的代码。如果加了async表示模块加载完成就会立即执行。defer属性和默认值一样,都是等到页面渲染完成再执行。
二、引入js
使用import引入其它js,在添加了module属性的js代码块/文件里,import module from 'moduleName.js'即可引入一个js文件。
示例:index.js
import header from './header/header.js'
三、指定输出
在被引入的js文件里,使用 export 输出指定的内容。
示例header.js:
function header() {
console.log("this is header");
}
export default header;
在index.js里边,import进来的header,就是在header.js里边输出的header,它是一个函数,在index.js里边调用的时候,就想调用一个普通函数一样使用就可以。