我在使用Webpack上的Babel编译我的React JSX代码时遇到了问题。当我尝试在我的代码上运行webpack时，一个SyntaxError会出现＆＃34; Unexpected token＆＃34;。
ERROR in ./src/main.jsx
Module build failed: SyntaxError: Unexpected token (1123:0)
1121 | ReactDOM.render(<Dungeon />,
1122 | document.getElementById("game"));
> 1123 |
| ^
似乎是空行错误。我不确定该怎么做。
我安装了预设babel-preset-es2015和babel-preset-react。
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: [
'./src/main.jsx'
]
},
output: {
publicPath: '/dist/',
path: path.join(__dirname, 'dist/'),
filename: 'main.js'
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin('./styles.css')
],
module: {
loaders: [
{
test: /\.jsx$/,
exclude: [/node_modules/, /styles/],
include: path.join(__dirname, 'src'),
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [/node-modules/]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
}
};
.babelrc
{
"plugins": ["transform-react-jsx"],
"presets": [ "react", "es2015", "stage-0" ]
}
我感激任何帮助，无论如何！感谢。
修改
因此，我已将部分代码分离到一个模块中，尝试对所有内容进行排序，并将部分代码移至新文件Grid.js。这会导入到main.jsx，import './Grid.js';位于文件顶部。现在，当我尝试运行Webpack时，基本上会出现相同的错误，但它现在指向Grid.js文件的末尾，而不是main.jsx的末尾。
ERROR in ./src/Grid.js
Module build failed: SyntaxError: Unexpected token (208:2)
206 | // Loop back from the target square and return the path
207 | return closed;
> 208 | };
| ^
它似乎不是代码。我已尝试删除项目目录中的node_modules文件夹，并在重新安装依赖项之前重新启动npm init。没有工作。 ：/
修改2：以下是Grid.js的代码。
// Declare a Grid namespace
var Grid = {};
Grid.getAdjacentCells = (x, y, grid, noDiagonal) => {
// returns an array of adjacent cells.
var adjacents = [];
if (grid[y - 1] && grid[y - 1][x] != null) { // northern cell
adjacents.push({
x: x,
y: y - 1,
cell: grid[y - 1][x],
direction: "n"
});
}
if (grid[y] && grid[y][x + 1] != null) { // eastern cell
adjacents.push({
x: x + 1,
y: y,
cell: grid[y][x + 1],
direction: "e"
});
}
if (grid[y + 1] && grid[y + 1][x] != null) { // southern cell
adjacents.push({
x: x,
y: y + 1,
cell: grid[y + 1][x],
direction: "s"
});
}
if (grid[y] && grid[y][x - 1] != null) { // western cell
adjacents.push({
x: x - 1,
y: y,
cell: grid[y][x - 1],
direction: "w"
});
}
// if noDiagonal is false, grab diagonal cells
if (!noDiagonal) {
if (grid[y - 1] && grid[y - 1][x - 1] != null) { // north-west cell
adjacents.push({
x: x - 1,
y: y - 1,
cell: grid[y - 1][x - 1],
direction: "nw"
});
}
if (grid[y - 1] && grid[y - 1][x + 1] != null) { // north-east
adjacents.push({
x: x + 1,
y: y - 1,
cell: grid[y - 1][x + 1],
direction: "ne"
});
}
if (grid[y + 1] && grid[y + 1][x + 1] != null) { // south-east
adjacents.push({
x: x + 1,
y: y + 1,
cell: grid[y + 1][x + 1],
direction: "se"
});
}
if (grid[y + 1] && grid[y + 1][x - 1] != null) {
adjacents.push({
x: x - 1,
y: y + 1,
cell: grid[y + 1][x - 1],
direction: "sw"
});
}
}
return adjacents;
};
Grid.getRandomPointWithin = (x1, x2, y1, y2) => {
return {
x: Math.randomBetween(x1, x2),
y: Math.randomBetween(y1, y2)
};
};
Grid.getRandomMatchingCellWithin = (x1, x2, y1, y2, type, grid) => {
let cell = {
x: Math.randomBetween(x1, x2),
y: Math.randomBetween(y1, y2)
};
while (grid[cell.y][cell.x].type != type) {
cell = {
x: Math.randomBetween(x1, x2),
y: Math.randomBetween(y1, y2)
};
}
return cell;
};
Grid.randomDirection = () => {
return (Math.randomBetween(0,1) ? "x" : "y");
};
Grid.calculateApproxDistance = (x1, y1, x2, y2) => {
return Math.abs((x2 - x1) + (y2 - y1));
};
Grid.determinePath = (startX, startY, targetX, targetY, grid) => {
let closed = [],
open = [];
if (startX == targetX && startY == targetY)
return [];
let getCellFromList = (x, y, list) => {
for (let cell of list) {
console.log("Checking cell: ", cell, "of list against x:", x, "and y:", y);
if (cell.x == x && cell.y == y) {
return cell;
}
}
return false;
};
let addCellToList = (cell, list) => {
for (let i in list) {
// check whether cell already exists in the list
if (list[i].x == cell.x && list[i].y == cell.y) {
// if so, check whether the cell in list has a higher score.
if (list[i].f > cell.f) {
// update cell to the lower score if so.
list[i].g = cell.g;
list[i].h = cell.h;
list[i].f = cell.f;
list[i].parent = cell.parent;
return list;
}
// and if it the newer cell has a higher score, return the list as it is.
return list;
}
}
// The cell doesn't exist in the list. Push it in.
list.push(cell);
return list;
};
let start = {
x: startX,
y: startY,
g: 0,
h: Grid.calculateApproxDistance(startX, startY, targetX, targetY) * 10
};
start.f = start.g + start.h;
open.push(start);
let searching = true;
while (searching) {
// Set the current cell to one with the lowest score in the open list.
let curr = open.reduce(function lowestScoreInOpenList(prev, curr) {
if (!prev)
return curr;
if (curr.f < prev.f)
return curr;
return prev;
}, null);
// Transfer it to the closed list
open.splice(open.indexOf(curr), 1);
closed = addCellToList(curr, closed);
// Check adjacent cells
let adjacentCells = Grid.getAdjacentCells(curr.x, curr.y, grid);
// Filter through adjacent cells
adjacentCells = adjacentCells.filter(function adjacentCellFilter(a) {
// Check whether cell is in the closed list
if (getCellFromList(a.x, a.y, closed)) {
// If so, skip it.
return false;
}
// If cell is not a room cell, skip it.
else if (a.cell.type != "corridor" ||
a.cell.type != "room")
return false;
return true;
});
console.log(adjacentCells);
// Transform each returned adjacent object into a path object
searching = false;
// Loop back from the target square and return the path
return closed;
};
答案 0 :(得分：0)
你错过了一个＆＃39;}＆＃39;在文件的末尾。
这是Grid.js的正确缩进版本
// Declare a Grid namespace
var Grid = {};
Grid.getAdjacentCells = (x, y, grid, noDiagonal) => {
// returns an array of adjacent cells.
var adjacents = [];
if (grid[y - 1] && grid[y - 1][x] != null) {
// northern cell
adjacents.push({
x: x,
y: y - 1,
cell: grid[y - 1][x],
direction: 'n',
});
}
if (grid[y] && grid[y][x + 1] != null) {
// eastern cell
adjacents.push({
x: x + 1,
y: y,
cell: grid[y][x + 1],
direction: 'e',
});
}
if (grid[y + 1] && grid[y + 1][x] != null) {
// southern cell
adjacents.push({
x: x,
y: y + 1,
cell: grid[y + 1][x],
direction: 's',
});
}
if (grid[y] && grid[y][x - 1] != null) {
// western cell
adjacents.push({
x: x - 1,
y: y,
cell: grid[y][x - 1],
direction: 'w',
});
}
// if noDiagonal is false, grab diagonal cells
if (!noDiagonal) {
if (grid[y - 1] && grid[y - 1][x - 1] != null) {
// north-west cell
adjacents.push({
x: x - 1,
y: y - 1,
cell: grid[y - 1][x - 1],
direction: 'nw',
});
}
if (grid[y - 1] && grid[y - 1][x + 1] != null) {
// north-east
adjacents.push({
x: x + 1,
y: y - 1,
cell: grid[y - 1][x + 1],
direction: 'ne',
});
}
if (grid[y + 1] && grid[y + 1][x + 1] != null) {
// south-east
adjacents.push({
x: x + 1,
y: y + 1,
cell: grid[y + 1][x + 1],
direction: 'se',
});
}
if (grid[y + 1] && grid[y + 1][x - 1] != null) {
adjacents.push({
x: x - 1,
y: y + 1,
cell: grid[y + 1][x - 1],
direction: 'sw',
});
}
}
return adjacents;
};
Grid.getRandomPointWithin = (x1, x2, y1, y2) => {
return {
x: Math.randomBetween(x1, x2),
y: Math.randomBetween(y1, y2),
};
};
Grid.getRandomMatchingCellWithin = (x1, x2, y1, y2, type, grid) => {
let cell = {
x: Math.randomBetween(x1, x2),
y: Math.randomBetween(y1, y2),
};
while (grid[cell.y][cell.x].type != type) {
cell = {
x: Math.randomBetween(x1, x2),
y: Math.randomBetween(y1, y2),
};
}
return cell;
};
Grid.randomDirection = () => {
return Math.randomBetween(0, 1) ? 'x' : 'y';
};
Grid.calculateApproxDistance = (x1, y1, x2, y2) => {
return Math.abs(x2 - x1 + (y2 - y1));
};
Grid.determinePath = (startX, startY, targetX, targetY, grid) => {
let closed = [], open = [];
if (startX == targetX && startY == targetY) return [];
let getCellFromList = (x, y, list) => {
for (let cell of list) {
console.log(
'Checking cell: ',
cell,
'of list against x:',
x,
'and y:',
y
);
if (cell.x == x && cell.y == y) {
return cell;
}
}
return false;
};
let addCellToList = (cell, list) => {
for (let i in list) {
// check whether cell already exists in the list
if (list[i].x == cell.x && list[i].y == cell.y) {
// if so, check whether the cell in list has a higher score.
if (list[i].f > cell.f) {
// update cell to the lower score if so.
list[i].g = cell.g;
list[i].h = cell.h;
list[i].f = cell.f;
list[i].parent = cell.parent;
return list;
}
// and if it the newer cell has a higher score, return the list as it is.
return list;
}
}
// The cell doesn't exist in the list. Push it in.
list.push(cell);
return list;
};
let start = {
x: startX,
y: startY,
g: 0,
h: Grid.calculateApproxDistance(startX, startY, targetX, targetY) * 10,
};
start.f = start.g + start.h;
open.push(start);
let searching = true;
while (searching) {
// Set the current cell to one with the lowest score in the open list.
let curr = open.reduce(
function lowestScoreInOpenList(prev, curr) {
if (!prev) return curr;
if (curr.f < prev.f) return curr;
return prev;
},
null
);
// Transfer it to the closed list
open.splice(open.indexOf(curr), 1);
closed = addCellToList(curr, closed);
// Check adjacent cells
let adjacentCells = Grid.getAdjacentCells(curr.x, curr.y, grid);
// Filter through adjacent cells
adjacentCells = adjacentCells.filter(function adjacentCellFilter(a) {
// Check whether cell is in the closed list
if (getCellFromList(a.x, a.y, closed)) {
// If so, skip it.
return false;
} else if (a.cell.type != 'corridor' || a.cell.type != 'room')
// If cell is not a room cell, skip it.
return false;
return true;
});
console.log(adjacentCells);
// Transform each returned adjacent object into a path object
searching = false;
// Loop back from the target square and return the path
return closed;
}
};