- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 ES6 的新手,如果这是一个重复的问题,请原谅我。如标题所述,我目前收到错误:
Uncaught SyntaxError: Unexpected token import
显然,对象 Person 尚未成功导入 app.js
文件中使用。
我查看了网络上的示例代码,但仍然无法正常工作。我怀疑它与 webpack.config.js
设置有关。
我也尝试过使用 let person = require("./modules/Person");
但它不起作用。
请问有什么想法吗?他们将不胜感激。
我在下面提供了代码摘录:
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
import { Person } from './modules/person';
let vic = new Person("Fred", "Web Developer", "male");
vic.Greet();
vic.EchoOccupation("Web Developer");
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>
最佳答案
错误发生是因为从person.js
导出的模块没有Person
属性。
您可以通过进行三项更改来解决此问题:
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
// Import the Person class
import Person from './modules/person';
webpack.config.js
...
module: {
// Rename the 'loader' property to 'loaders'
loaders: [
...
]
}
您可以在此处找到有关import
的更多信息:ES6 import
关于javascript - Webpack/Babel ES6 错误 : Uncaught SyntaxError: Unexpected token import,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39520444/
一旦在 qconsole Marklogic 中运行以下代码,我就会遇到以下错误 XDMP-UNEXPECTED: (err:XPST0003) Unexpected token syntax err
我已经在我的包中编写了这个函数。 def partitionIntoDays(ls, number, lookupKey=None): ''' Partitions the location
我只是一个 android 初学者,我已经安装了 Android Studio(版本是 1.0.2),并创建了一个新的空白应用程序,按照名为“构建你的第一个应用程序”的官方教程,我学习到这个页面' h
这只是前几天工作,但我刚刚将我的代码更新到运行乘客 2.2.4 的审查服务器,而我的 2.3.4 rails 应用程序现在无法在那个盒子上启动。 乘客报告: Passenger encountered
我正在尝试使用带有 Angular 2的整页, 将其导入我的 app.module.ts 时出现以下错误。 "(SystemJS) Unexpected token ) at Obje
TFS2015 vNext 构建失败并出现记录器错误(下面附有错误消息)。根据我的调查,这看起来与 CentralLogger - "Microsoft.TeamFoundation.Distribu
计算机科学学校项目。我需要编写一个程序,其中用户声明数组的大小,然后以数字、非递减顺序填充数组,然后声明一个值 x。然后将 X 分配到适当的位置,以便整个数组按数字、非递减顺序排列。然后输出该数组。
在这 2 个方法中,inspect1 显示编译错误“Unexpected bound”而 inspect2 工作正常,为什么? public void inspect1(List u){ S
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我正在尝试运行以下代码,但遇到了“此时意外”错误。 (echo COPY (SELECT ta.colA as name, ta.colB as user_e, ta.colC as user_n,
我有以下查询: select u.UserName, count(*) as total from Voting v join User u using (UserID) where unique (
我们有以下查询在 MSSQL 中完美运行但在 MySQL 中无法运行: select CONVERT(datetime, dateVal) as DateOccurred, itemID, COUNT
我的代码中存在缩进错误问题。它看起来是正确的...有人能指出我做错了什么吗?我的查询行不断收到错误。 def invoice_details(myDeliveryID): conn = pym
我有以下代码: int a , b , sum; cin>>a>>b; sum=a+b; cout>a>>b>>c; cout<
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我在一个批处理文件上运行这个命令: for %I in (*.txt *.doc) do copy %I c:\test2 ...它不断返回: I was unexpected at this tim
创建查询时出现错误: 'from' unexpected 我的代码如下: @Override public Admin findByAdmin(Admin admin) {
我正在尝试运行此 python 代码,但我不断收到错误消息“意外缩进”。我不确定怎么了。间距似乎很好。有什么想法吗? services = ['Service1'] for service in
我在名为“circular_dependency”的目录中有一些 python 文件: 导入文件_1.py: from circular_dependency.import_file_2 import
我正在尝试使用 gcc 编译代码并运行可执行文件,但它抛出错误: gcc somefile.c -o somefile 编译成功。但是,当我尝试执行它时: $sh somefile 它导致:语法错误:
我是一名优秀的程序员,十分优秀!