ES6 模块技术应用实例

重要说明

1. import 语法必须作用于 moudle 环境,使用时需要声明类型 :

<script type="module">
//...
</script>

2. import 不支持本地相对路径,可以利用 Live Serve ( vscode ) 的一个插件,开启一个临时 web 服务。

Live Serve 使用步骤 :

1 vscode 查找 live server 安装
2 新建一个文件夹 创建 index.html 拖进 vscode
3 shift + command + p 在弹出菜单中选择 open with live server

实例项目结构

|_ demo/
    index.html
    profile.js

profile.js 源码

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
function testFunc(content) {
    console.log(content);
}
export {firstName, lastName, year, testFunc};

index.html 源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="module">
import {firstName, lastName, year, testFunc as s} from "./profile.js";
console.log(firstName, lastName, year);
s("hello");
</script>
</body>
</html>