Webpack/Babel ES6 오류 : Uncaught SyntaxError : 예기치 않은 토큰 가져 오기

저는 ES6에 매우 익숙합니다. 중복 된 질문이 있으면 용서해주세요.Webpack/Babel ES6 오류 : Uncaught SyntaxError : 예기치 않은 토큰 가져 오기

Uncaught SyntaxError: Unexpected token import

분명히 대상자가 성공적으로 app.js 파일에 사용하기 위해 가져 오지 않은 : 제목 상태로 저는 현재 오류가 발생하고 있습니다.

그러나 웹에서 예제 코드를 살펴 보았지만 여전히 작동하지 않습니다. 나는 webpack.config.js 설정과 관련이 있다고 생각합니다.

나는 또한 let person = require("./modules/Person");을 사용해 보았지만 작동하지 않습니다.

아이디어를주십시오. 그들은 크게 감사 할 것입니다.

나는 아래의 코드 발췌 제공했습니다 :

SRC/JS/모듈/person.js을

class Person { 

    constructor(name, jobtitle, sex){ 
     this.name = name; 
     this.jobtitle = jobtitle; 
     this.message = document.getElementById("message").html; 
     this.sex = sex; 
    } 

    Greet(){ 
     console.log("Hello, my name is "+ this.name + " and i am a " + sex); 
    } 

    EchoOccupation(){ 
     console.log("I am a "+ this.jobtitle); 
    } 

    EchoMessage(){ 
     console.log("The message is "+ this.message); 
    } 
} 

module.exports = Person;

SRC는/JS /는

import { Person } from './modules/person'; 

let vic = new Person("Fred", "Web Developer", "male"); 
vic.Greet(); 
vic.EchoOccupation("Web Developer");

을 app.js webpack.config.js

var path = require("path"), 
    watchBabel = require("watch-babel"), 
    srcJsDir = "./src/js/", 
    srcDestJsDir = "dist/assets/js/", 
    options = { glob: "src/*.js" }, 
    watcher = watchBabel(srcJsDir, srcDestJsDir, options); 

watcher.on("ready", function() { 
    console.log("ready"); 
}).on("success", function(filepath) { 
    console.log("Transpiled ", filepath); 
}).on("failure", function(filepath, e) { 
    console.log("Failed to transpile", filepath, "(Error: ", e); 
}).on("delete", function(filepath) { 
    console.log("Deleted file", filepath); 
}); 

module.exports = { 

    entry: [srcJsDir + "/app.js"], 
    output: { 
     path: srcDestJsDir, 
     filename: "app.js" 
    }, 
    watch: true, 
    devServer: { 
     inline: true, 
     port: 8000 
    }, 
    module: { 
     loader : [ 
      { 
       test: /\.js$/, 
       exclude: "/node_modules/", 
       loaders: ['babel', 'watch-babel'], 
       query: { 
        presets: ['es2015'], 
        plugins: ['babel-plugin-uglify'] 
       } 
      }, 
     ] 
    }, 
    resolveLoader: { 
     root: path.join(__dirname, 'node_modules/') 
    } 
};

index.html을

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>im loving es6</title> 
    <link href="/src/css/frameworks/bootstrap.min.css" /> 
</head> 
<body> 
    <header></header> 
    <main> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <article> 
         <section> 
          <div id="app"></div> 
          <div id="message">Hello this is my message!</div> 
         </section> 
         <aside></aside> 
        </article> 
       </div> 
      </div> 
     </div> 
    </main> 
    <footer></footer> 
    <script type="text/javascript" src="/dist/assets/js/app.js"></script> 
</body> 
</html>

출처

2016-09-15 vicgoyso

, 당신이 같은 기록 할 것으로 상대적으로 분명한 것 같다 VAR 사람 = 필요 ('./ 모듈/사람 '); "가져 오기"를 사용하는 것이 아닙니다. 이것이 구문 오류의 원인이됩니다. Webpack 설정과 관련하여 도움을 드릴 수 없습니다. 아 맞아, 웹 브라우저는 일반적으로 새로운 "가져 오기"구문을 이해하지 못합니다. –

고마워요 !! 아직도 그것을 얻지 않는다. 나는 Webpack이 "번역 할 것"처럼 "가져 오기"키워드를 변환 시키거나 변환 할 것이라고 생각했을 것이다. 게다가 나는 "let person = require ("./ modules/Person ");" 뿐만 아니라 그 시점에서 나는 아마도 다른 오류 (게시 한 후 몇 가지를 볼 수 있음)에 직면했지만 좌절로 인해 깨닫지 못했습니다. – vicgoyso

Babel은 실제로 그런 수입을 변환 할 수 있지만 웹 브라우저 (예 : 최근 Chrome에서는 "let"과 같은 다른 ES6 구문을 이해해야합니다. 잘못된 스크립트가있는 그대로 실행되고있는 것처럼 보입니다. –

person.js에서 내 보낸 모듈이 Person 속성을 가지고 있지 않기 때문에 오류가 발생합니다.

class Person { 
    ... 
} 

// Set the Person class as the object exported from this module 
export default Person;

SRC는/JS /가

// Import the Person class 
import Person from './modules/person';

을 app.js

SRC/JS/모듈/person.js :

세 가지 변경하여이 문제를 해결할 수 있습니다
webpack.config.js
,
... module: { // Rename the 'loader' property to 'loaders' loaders: [ ... ] }

당신은 import 여기에 대한 자세한 정보를 확인할 수있는 것들 : 즉각적인 문제에 대한 ES6 import

출처

2016-09-16 01:11:11 gnerkus

Chris P와 gnerkus 모두 맞습니다. webpack.config.js에는 두 가지 심각한 오류가있었습니다. "loader : []"를 "loaders : []"로 업데이트하고 "plugins : [ 'babel-plugin-uglify']를 제거하면 문제가 해결되었습니다. 고마워요, 어차피 도와주세요.하지만 당혹 스러울 때, 질문을 되돌아보고 결국 거기에 도달 할 것입니다. – vicgoyso

Webpack/Babel ES6 오류 : Uncaught SyntaxError : 예기치 않은 토큰 가져 오기

답변

관련 문제