Question

我正在尝试使用环回4设置项目，并且在编写箭头功能时出现此错误。似乎es6代码没有被转换回es5，因此箭头功能错误。我尝试删除所有babel依赖项，然后重试，但仍然无法正常工作。

executeStep = () => {
            ^
SyntaxError: Unexpected token =

我正在为该项目使用babel 7。

这是我的package.json

{
  "name": "applicationName",
  "version": "1.0.0",
  "description": "applicationDescription",
  "keywords": [
    "loopback-application",
    "loopback"
  ],
  "main": "index.js",
  "engines": {
    "node": ">=8.9"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ]
    ]
  },
  "scripts": {
    "build": "lb-tsc && babel src -s -d dist",
    "build:watch": "lb-tsc --watch",
    "clean": "lb-clean dist *.tsbuildinfo",
    "lint": "npm run prettier:check && npm run eslint",
    "lint:fix": "npm run eslint:fix && npm run prettier:fix",
    "prettier:cli": "lb-prettier \"**/*.ts\" \"**/*.js\"",
    "prettier:check": "npm run prettier:cli -- -l",
    "prettier:fix": "npm run prettier:cli -- --write",
    "eslint": "lb-eslint --report-unused-disable-directives .",
    "eslint:fix": "npm run eslint -- --fix",
    "pretest": "npm run clean && npm run build",
    "test": "lb-mocha --allow-console-logs \"dist/__tests__\"",
    "posttest": "npm run lint",
    "test:dev": "lb-mocha --allow-console-logs dist/__tests__/**/*.js && npm run posttest",
    "docker:build": "docker build -t orchestrator .",
    "docker:run": "docker run -p 3000:3000 -d orchestrator",
    "migrate": "node ./dist/migrate",
    "prestart": "npm run build",
    "start": "node -r source-map-support/register . && nodemon --exec npm run babel-node -- ./index.js",
    "prepublishOnly": "npm run test"
  },
  "repository": {
    "type": "git"
  },
  "author": "",
  "license": "",
  "files": [
    "README.md",
    "index.js",
    "index.d.ts",
    "dist",
    "src",
    "!*/__tests__"
  ],
  "dependencies": {
    "@loopback/boot": "^1.5.5",
    "@loopback/context": "^1.22.1",
    "@loopback/core": "^1.10.1",
    "@loopback/openapi-v3": "^1.9.6",
    "@loopback/repository": "^1.13.1",
    "@loopback/rest": "^1.18.1",
    "@loopback/rest-explorer": "^1.3.6",
    "@loopback/service-proxy": "^1.3.5",
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/preset-env": "^7.6.0",
    "@loopback/build": "^2.0.10",
    "@loopback/eslint-config": "^4.0.2",
    "@loopback/testlab": "^1.8.0",
    "@types/node": "^10.14.17",
    "@typescript-eslint/eslint-plugin": "^2.1.0",
    "@typescript-eslint/parser": "^2.1.0",
    "blue-tape": "^1.0.0",
    "eslint": "^6.3.0",
    "eslint-config-prettier": "^6.2.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-eslint-plugin": "^2.1.0",
    "eslint-plugin-mocha": "^6.1.0",
    "jest": "^24.9.0",
    "source-map-support": "^0.5.13",
    "typescript": "~3.6.2"
  }
}

这是我的babel.config.js文件

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-arrow-functions"
  ]
}

这是给我错误的代码

executeStep = () => {
    //some steps
}

这是错误日志

 executeStep = () => {
                ^

SyntaxError: Unexpected token =
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)

Answer 1

您可以使用

var executeStep = () => {
    //some steps
}

Answer 2

您需要添加babel-transform-class-properties

在您的示例中，您需要：

npm install --save-dev babel-plugin-transform-class-properties

安装成功后，您需要修改加载器

{
   test: /\.js$/,
   loader: 'babel-loader',
   exclude: /node_modules/,
   query: {
      presets: ['react', 'es2015', 'react-hmre'],
      plugins: ['transform-class-properties']
   }
}

使用我的问题已解决。波纹管提及线程对我在项目中解决此问题非常有用。

Source One Source Two

尽管babel箭头功能不起作用

2 个答案: