reactjs - Babel-loader：意外的令牌

问题描述

我继承了一个我无法启动的项目。

我一开始遇到的问题（运行yarn dev）是：

let vdom = <Desktop />;

阅读此接受的答案后： babel-loader jsx SyntaxError: Unexpected token

我在 webpack.config.js 中改变了这个：

module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: { presets: ["es2015", "stage-0"] },
        },

至：

module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: { presets: ["react"] },
        },

显然是先安装 babel-loader-react。

现在我面临的错误是不同的“意外令牌”：

有什么可能被错误配置的吗？

（有几个类似的；箭头函数和对象符号）

这是我收到的（原始）package.json

{
  "name": "Project-name", #can't share
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --host 0.0.0.0",
    "build": "NODE_ENV=prod webpack -p"
  },
  "author": "Author", #can't share
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.14.0",
    "babel-runtime": "^6.11.6",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.4.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^1.2.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.0-rc.6",
    "webpack-dev-server": "^2.2.0-rc.0"
  },
  "dependencies": {
    "babel-plugin-webpack-loaders": "^0.9.0",
    "gsap": "^3.0.5",
    "lax.js": "^1.2.5",
    "pixi.js": "^5.2.0",
    "preact": "^7.2.0",
    "preact-render-to-string": "^3.7.0",
    "promise-polyfill": "^6.0.2",
    "scrollmagic": "^2.0.7",
    "scrollmagic-plugin-gsap": "^1.0.4",
    "unfetch": "^2.1.2",
    "webpack-node-externals": "^1.6.0"
  }
}

标签： reactjswebpackbabeljsunexpected-token

您应该保留已经存在的预设 query: { presets: ["latest", "react"] }, 另外，我假设您已将这些软件包安装为 devDependencies

babel-core,
babel-loader,
babel-preset-react,
babel-preset-latest

看起来您在上面使用的 babel-preset-stage-0 没有为类提供转换插件（特别是您在上面显示的错误https://babeljs.io/docs/en/babel-plugin-transform-class -属性）。尝试使用https://babeljs.io/docs/en/6.26.3/babel-preset-latest。它应该具有您要使用的所有预设。您也可以尝试使用https://babeljs.io/docs/en/babel-preset-env

另外，请阅读https://blog.jakoblind.no/babel-preset-env/

reactjs - Babel-loader：意外的令牌

问题描述

解决方案

推荐阅读