遇到问题的背景:
学习es6的过程里,想要去尝试一下新学的东西,所以自己在本地写一个demo去验证一下。
遇到这个问题的地方:
写了一个js,test.js里面的内容是这样子的:
var name = 'xiaoming';
var age = 23;
export {name};
然后呢就创建了一个新的hmtl文件 test.html
然后在里面使用import ,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
import {name} from './test.js';
console.log(name);
</script>
</body>
</html>
很典型的一个新手的尝试写法~~.
这时候浏览器就会很不给面子的提示:
wtf???
在我的印象里,谷歌浏览器(chrome 61之后)不是已经支持es6的Module了吗,为什么不能直接用呢??
带着这个疑问,去网上搜索了一下.
得出这样的结论 :
谷歌浏览器(61)之后的确是支持Module,只是并不是简单的这样用。
详细可以参考这个网站: -> 参考网址 <-
简单来说,就是需要这样子来用,直接上代码:
<script type="module">
import {name} from './test.js';
console.log(name); //xiaoming
</script>
就是说需要在script标签里加上 type="module".
或者我们可以使用babel 转成es5.这样也能愉快的使用import和export 。