在Codepen項目中使用Javascript ES6導入和導出功能

我想在我的Codepen project中使用Javascript ES6導入/導出功能，並且我認爲它是基於我讀取的某些articles支持的，但是我無法將其導入工作。我已經將我的Codepen項目設置爲使用Webpack和Babel來處理我的JavaScript文件，甚至嘗試使用Chrome Canary來查看是否會支持ES6（無濟於事）。在Codepen項目中使用Javascript 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的另一個例子，但我不知道我在做什麼不同，以獲得錯誤。任何幫助將非常感激。

來源

2017-10-08 12MonthsASlav

你有兩種解決問題的方法。無論是這樣的：

//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的。

來源

2017-10-08 22:46:05 andrewatkinson

我試過這兩種方法（Codepen更新），但都沒有工作。列出的第一種方法仍然給出錯誤「Uncaught SyntaxError：意外標識符」（在Chrome Canary中），第二種方法給出錯誤「Uncaught SyntaxError：Unexpected token {」。你是否能夠在一個Codepen項目中工作？還有什麼我可以錯過？顯然這是可能的，因爲我發佈在底部的Codepen項目鏈接能夠以某種方式工作。 – 12MonthsASlav

在Codepen項目中使用Javascript ES6導入和導出功能

回答

相關問題