在 Codepen 项目中使用 Javascript ES6 导入和导出功能

Question

我正在尝试在我的Codepen 项目中使用 Javascript ES6 导入/导出功能，并且我认为根据我读过的一些文章它是受支持的，但我在让它工作时遇到了麻烦。我已经将我的 Codepen 项目设置为使用 Webpack 和 Babel 来处理我的 javascript 文件，甚至尝试使用 Chrome Canary 来查看是否支持 ES6（无济于事）。

在我的 Codepen 项目中，我编写了一个从一个文件导出字符串变量的基本示例：

//data.js
export let firstName = 'George';

然后将其导入到我的主要 javascript 文件中以登录控制台：

//index.js
import firstName from "./data";
console.log(FirstName);

不幸的是，Chrome 控制台报告错误：

Uncaught VM3034 index.js:1
SyntaxError: Unexpected token import

如果可能的话，有谁知道如何让它发挥作用？我什至找到了Codepen 项目成功使用 ES6 导入/导出的另一个示例，但我不确定我做了什么不同的操作来得到错误。任何帮助将非常感激。

Answer 1

您有两种方法来解决这个问题。要么这个：

//index.js
import firstName from "./data";
console.log(firstName);

和：

//data.js
let firstName = 'George'
export default firstName

在这种情况下，您可以使用default关键字来默认导出 firstName。导入时，您可以任意为其指定相同的名称。（可以使用任何名称导入）。

- - - - - - 或者： - - - - - - -

// index.js
import {firstName} from "./data";
console.log(firstName);

和：

// data.js
export let firstName = 'George'

在这种情况下，您可以使用花括号从模块导入命名导出。 firstNamedata