ES6 export，import报错

本文转载自查看原文 2018-12-13 10:56 1600 ECMAScript 6/ JavaScript

问题描述：

现有两个文件：

profile.js

const firstName = 'Michael';
const lastName = 'Jackson';
const year = 2018;
export {firstName, lastName, year}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    import {firstName, lastName, year} from './profile.js';
    console.log(firstName);
    console.log(lastName);
    console.log(year);
</script>
</body>
</html>

运行结果：

test.html:9 Uncaught SyntaxError: Unexpected token {

问题解答：

在HTML文件中不能使用export，import，需要在webpack构建项目中使用，并且只作用于.vue和.js文件。

如果非要使用且浏览器支持ES6，需要加上 type="module"。

<script type="module">
    import {firstName, lastName, year} from './profile.js';
    console.log(firstName);
    console.log(lastName);
    console.log(year);
</script>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 ES6和Node.js的import和export JS ES6中export和import详解 ES6中export , export default , import模块系统总结 ES6常用语法简介import export ES6中的import与export对class操作相关用法举例在 Node.js 中使用 ES6 模块 import 和 export es6中的import,export浏览器已经支持 es6 import export 引入导出变量方式 10、JS ES6中export和import详解 import和export语法报错