ECMAScript的第6个版本 ECMAScript 6.0(简称 ES6)是 JavaScript 语言的标准
在js用es6
//初始化package.json
npm init -y
//在package.json第一个大括号添加
"type":"module"
导入文件:a.js
export let a = 'a';
export function fun() {
console.log('this is the funA')
}
//上面(分别暴露)的可以写成像下面(统一暴露)
let b = 'b';
function funb() {
console.log('this is the funb')
}
export {
b,
funb
}
// (默认暴露)
export default {
b: 'db',
hanshu: function () {
console.log('this is the default')
}
}
test.js
//1.通用导入方式
import * as m from './a.js';
console.log(m.a);
m.fun();
console.log('-----------------------------')
//2.解构赋值形式
// 两个名字重复可以用as,默认暴露一定要用as
import { b } from './a.js';
import { b as newB, funb } from './a.js';
console.log(b);
console.log('new: '+newB);
funb();
console.log('-----------------------------')
import { default as d } from './a.js';
console.log(d.b)
d.hanshu()
//3.简便形式(只对于default)
import md from './a.js'
console.log(md)
在html用es6:添加拓展 live server ,然后在html文件右键用live server打开
test.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 src="test.js" type="module">
导入test.js文件 || 直接写
-->
<script type="module">
// 1.通用导入方式
import * as m from './a.js';
console.log(m.a);
m.fun();
console.log('-----------------------------')
// 2.解构赋值形式
// 两个名字重复可以用as,默认暴露一定要用as
import { b } from './a.js';
import { b as newB, funb } from './a.js';
console.log(b);
console.log('new: '+newB);
funb();
console.log('-----------------------------')
import { default as d } from './a.js';
console.log(d.b)
d.hanshu()
// 3.简便形式(只对于default)
import md from './a.js'
console.log(md)
</script>
</body>
</html>