Webpack / Babel ES6错误：未捕获语法错误：意外的令牌导入

Question

I am very new to ES6 so forgive me if this a duplicate question. 我对ES6还是很陌生，因此如果有重复的问题请原谅。 As the title states I'm currently receiving the error: 如标题所示，我当前收到错误：

Uncaught SyntaxError: Unexpected token import 未捕获的SyntaxError：意外的令牌导入

Obviously the object Person has not been successfully imported for use in the app.js file. 显然，对象Person尚未成功导入以在app.js文件中使用。

I've looked at example code across the web however still not working. 我在网上看过示例代码，但是仍然无法正常工作。 I suspect its to do with the webpack.config.js settings. 我怀疑它与webpack.config.js设置有关。

I have also tried using let person = require("./modules/Person"); 我也尝试过使用let person = require("./modules/Person"); but it does not work. 但它不起作用。

Please any ideas? 有什么想法吗？ They'll be much appreciated. 他们将不胜感激。

I've provide code excerpts below: 我在下面提供了代码摘录：

src/js/modules/person.js src / js / modules / 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/app.js src / js / app.js

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

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

webpack.config.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 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>

Answer 1

The error occurs because the module exported from person.js does not have a Person property. 发生错误是因为从person.js导出的模块没有Person属性。

You can fix this by making three changes: 您可以通过以下三个更改来解决此问题：

src/js/modules/person.js src / js / modules / person.js

class Person {
  ...
}

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

src/js/app.js src / js / app.js

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

webpack.config.js webpack.config.js

...
module: {
  // Rename the 'loader' property to 'loaders'
  loaders: [
    ...
  ]
}

You'll find more information on import here: ES6 import 您可以在此处找到有关import更多信息： ES6导入

Webpack / Babel ES6错误：未捕获语法错误：意外的令牌导入

问题描述

1 个解决方案

解决方案1
4 已采纳 2016-09-16 01:11:11

Webpack / Babel ES6错误：未捕获语法错误：意外的令牌导入

问题描述

1 个解决方案

解决方案1 4 已采纳 2016-09-16 01:11:11

解决方案1
4 已采纳 2016-09-16 01:11:11