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