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

Question

我想在我的Codepen project中使用Javascript ES6导入/导出功能，并且我认为它是基于我读取的某些articles支持的，但是我无法将其导入工作。我已经将我的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 project using ES6 import/export successfully的另一个例子，但我不知道我在做什么不同，以获得错误。任何帮助将非常感激。

Answer 1

你有两种解决问题的方法。 无论是这样的：

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

有：

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

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

------------ OR：--------------

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

有：

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

在这情况下，通过使用大括号从data模块导入名为exportfirstName的。