Webpack，React JSX，Babel：模塊構建失敗，「意外令牌」爲空？

Question

我在Webpack上使用Babel編譯我的React JSX代碼時遇到了麻煩。當我嘗試在我的代碼上運行webpack時，SyntaxError出現「Unexpected token」。

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; 
}; 

Answer 1

您在文件末尾缺少'}'。

這裏是您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; 
    } 
};