Babel-loader:意外的标记

Question

我继承了react，一个我无法初始化的项目。

我最初遇到的问题(运行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"
  }
}

Answer 1

你应该保留已经存在的预设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-properties上面显示的错误)。尝试使用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/