Codepen 프로젝트에서 Javascript ES6 가져 오기 및 내보내기 기능 사용

Question

Codepen project에서 Javascript ES6 가져 오기/내보내기 기능을 사용하려고하고 있는데 articles에 기반하여 지원되었다고 생각했지만 읽는 데 문제가 있습니다. 작업. Webpack과 Babel을 사용하여 자바 스크립트 파일을 처리하도록 Codepen 프로젝트를 설정했으며, Chrome Canary를 사용하여 ES6을 지원하는지 확인했습니다.

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

그럼 내 차로 가져 오기 콘솔에 로그인하는 자바 스크립트 파일 :

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

내 Codepen 프로젝트에서

, 나는 하나 개의 파일에서 문자열 변수를 수출하는 기본 예제를 썼다 죄송합니다. 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 

, 당신은 기본 내보내기firstName 때문에, default 키워드를 사용합니다. 가져올 때 임의로 동일한 이름을 할당합니다. (그것은 어떤 이름으로도 가져올 수 있습니다).

------------ OR : --------------

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

와이에

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

경우 data 모듈에서firstName이라는 이름의 모듈을 중괄호를 사용하여 가져옵니다.