export : Uncaught SyntaxError: Unexpected token { 新手es6 export import问题

最新推荐文章于 2023-08-04 10:18:40 发布

__zackxiong__

最新推荐文章于 2023-08-04 10:18:40 发布

阅读量2w

点赞数 9

分类专栏： es6 文章标签： es6

本文链接：https://blog.csdn.net/qq_22046267/article/details/82228882

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

遇到问题的背景:

学习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 。

__zackxiong__

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
export : Uncaught SyntaxError: Unexpected token { 新手es6 export import问题

遇到问题的背景:学习es6的过程里，想要去尝试一下新学的东西，所以自己在本地写一个demo去验证一下。遇到这个问题的地方:写了一个js，test.js里面的内容是这样子的:var name = 'xiaoming';var age = 23;export {name};然后呢就创建了一个新的hmtl文件 test.html 然后在里面使用import ，内容如下...
复制链接

扫一扫