Fatal编程技术网
  • javascript/
  • Javascript Webpack/Babel ES6错误：未捕获的语法错误：意外的令牌导入

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

javascript ecmascript-6

Javascript Webpack/Babel ES6错误：未捕获的语法错误：意外的令牌导入,javascript,ecmascript-6,Javascript,Ecmascript 6,我对ES6非常陌生，所以如果这是一个重复的问题，请原谅我。正如标题所述，我当前收到错误： 未捕获的语法错误：意外的令牌导入 显然，尚未成功导入object Person以在app.js文件中使用 我已经看过了web上的示例代码，但是仍然不起作用。我怀疑这与webpack.config.js设置有关 我还尝试使用let person=require./modules/person；但它不起作用 有什么想法吗？他们会非常感激的 我提供了以下代码摘录： src/js/modules/person.js

我对ES6非常陌生，所以如果这是一个重复的问题，请原谅我。正如标题所述，我当前收到错误：

未捕获的语法错误：意外的令牌导入

显然，尚未成功导入object Person以在app.js文件中使用

我已经看过了web上的示例代码，但是仍然不起作用。我怀疑这与webpack.config.js设置有关

我还尝试使用let person=require./modules/person；但它不起作用

有什么想法吗？他们会非常感激的

我提供了以下代码摘录：

src/js/modules/person.js

src/js/app.js

webpack.config.js

index.html

发生此错误是因为从person.js导出的模块没有person属性

您可以通过进行三项更改来解决此问题：

src/js/modules/person.js

src/js/app.js

webpack.config.js

您将在此处找到有关导入的更多信息：

发生此错误是因为从person.js导出的模块没有person属性

您可以通过进行三项更改来解决此问题：

src/js/modules/person.js

src/js/app.js

webpack.config.js

您将在此处找到有关导入的更多信息：

对于您眼前的问题，您似乎比较清楚地希望编写如下内容：var Person=require'./modules/Person'；而不是使用导入。这就是语法错误的原因。我帮不了你的网页配置。啊，是的，你看，网络浏览器通常不理解新的导入语法。谢谢你的工作！！还是不明白。。。我原以为Webpack会像它所允许的那样传输或转换导入关键字。加上我尝试让person=require./modules/person；同样，可能在那一点上，我遇到了另一个错误，我在发布后看到了一些错误，但由于沮丧，我没有意识到。巴贝尔确实可以像那样转换导入，但请注意，网络浏览器，例如最近的Chrome，确实理解其他ES6语法，如let。在我看来，这个错误的脚本是按原样运行的。对于您眼前的问题，您似乎比较清楚地希望编写如下内容：var Person=require'./modules/Person'；而不是使用导入。这就是语法错误的原因。我帮不了你的网页配置。啊，是的，你看，网络浏览器通常不理解新的导入语法。谢谢你的工作！！还是不明白。。。我原以为Webpack会像它所允许的那样传输或转换导入关键字。加上我尝试让person=require./modules/person；同样，可能在那一点上，我遇到了另一个错误，我在发布后看到了一些错误，但由于沮丧，我没有意识到。巴贝尔确实可以像那样转换导入，但请注意，网络浏览器，例如最近的Chrome，确实理解其他ES6语法，如let。在我看来，这个错误脚本是按原样运行的。Chris P和gnerkus都是对的，webpack.config.js中有两个关键错误。将loader:[]更新为loader:[]并删除插件：['babel-plugin-uglify']修复了该问题。谢谢大家，忍不住感到尴尬，回头看看这个问题，最终会解决的。Chris P和gnerkus都是对的，webpack.config.js中有两个关键错误。将loader:[]更新为loader:[]并删除插件：['babel-plugin-uglify']修复了该问题。谢谢大家，忍不住感到尴尬，回头看看这个问题，最终会达到目的的。 
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;

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

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

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/')
    }
};

<!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>

class Person {
  ...
}

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

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

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