即使在 Webstorm 2018.3 中的 Babel 配置之后，Spread Operator 也会抛出 SyntaxError
Posted
技术标签:
【中文标题】即使在 Webstorm 2018.3 中的 Babel 配置之后，Spread Operator 也会抛出 SyntaxError【英文标题】：Spread Operator throws SyntaxError even after Babel Configuration in Webstorm 2018.3 【发布时间】：2019-01-03 16:29:13 【问题描述】：网络风暴/操作系统
Webstorm 2018.3/Windows 10
节点/NPM
v8.0.0/6.4.1
遵循的步骤
JetBrains ECMAScript6 in Webstorm Babel FileWatcher
我通过步骤添加了Babel
对于我安装的本地存储库npm i --save-dev @babel/cli @babel/core @babel/preset-env @babel/plugin-object-proposed-rest-spread
在根文件夹中添加了.babelrc，内容如下：
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
为npm start 配置了我的运行配置，因为我的package.json 中包含"start": nodemon app.js。
应用
我正在使用mongoose 来存储和获取来自 MongoDB 的信息，并使用 GraphQL 为查询/变异提供端点
这是我的代码中的mutation（函数）之一：
createEvent: (args) =>
const event = new Event(
title: args.eventInput.title,
description: args.eventInput.description,
price: +args.eventInput.price,
date: new Date(args.eventInput.date)
);
return event
.save()
.then(result =>
console.log(result);
return ...result._doc ;
)
.catch(err =>
console.log(err);
throw err;
);
错误：
SyntaxError: Unexpected token ...
再次遵循的步骤
根据SE Query to Configure Babel with Webstorm for node.js project，我尝试创建node.js app，但现在出现错误：
Error: querySrv ENOTFOUND _mongodb._tcp.undefined-p8e7q.mongodb.net
at errnoException (dns.js:50:10)
at QueryReqWrap.onresolve [as oncomplete] (dns.js:244:19)
code: 'ENOTFOUND',
errno: 'ENOTFOUND',
syscall: 'querySrv',
hostname: '_mongodb._tcp.undefined-p8e7q.mongodb.net'
我现在将 ...result._doc 替换为 return result._doc 并且代码工作正常，但我希望在其他代码块中使用扩展运算符。
我了解该错误与 Webstorm 无关，但我没有看到此问题的任何其他替代方法
编辑
File Watcher Babel
NPM 配置
Node.js 配置
通过右键单击菜单中的app.js 文件和Create 'app.js' 创建。我安装了npm i --save-dev @babel/register并将其更改为-r @babel/register，如博客中所述
app.js
const express = require('express'); // Add Express Module
const bodyParser = require('body-parser'); // Add Body-Parser Middleware for JSON handling in Requests
const graphqlHttp = require('express-graphql'); // Add Middleware for GraphQL Resolvers over Express HTTP
const buildSchema = require('graphql'); // javascript Object-Destructuring (pull objects from packages)
const mongoose = require('mongoose'); // MongoDB Third-Party package
const Event = require('./models/event'); // MongoDB Event Model
const app = express();
app.use(bodyParser.json()); // JSON parsing Middleware added
app.use('/graphql', graphqlHttp(
schema: buildSchema(`
type Event
_id: ID!
title: String!
description: String!
price: Float!
date: String!
input EventInput
title: String!
description: String!
price: Float!
date: String!
type RootQuery
events: [Event!]!
type RootMutation
createEvent(eventInput: EventInput): Event
schema
query: RootQuery
mutation: RootMutation
`),
rootValue:
events: () =>
return Event.find()
.then(events =>
return events.map( event =>
event._doc._id = event.id;
return event._doc;
);
)
.catch(err =>
console.log(err);
throw err;
)
,
createEvent: (args) =>
const event = new Event(
title: args.eventInput.title,
description: args.eventInput.description,
price: +args.eventInput.price,
date: new Date(args.eventInput.date)
);
return event
.save()
.then(result =>
console.log(result);
return ...result._doc ;
// return result._doc
)
.catch(err =>
console.log(err);
throw err;
);
,
graphiql: true
));
mongoose.connect(
`mongodb+srv://$process.env.MONGO_USER:$process.env.MONGO_PASSWORD@$process.env.MONGO_CLUSTER_NAME-p8e7q.mongodb.net/$process.env.MONGO_DB_NAME?retryWrites=true`)
.then( () =>
app.listen(3000);
).catch(err =>
console.log(err);
);
package.json
我添加了一些奇怪的 babel 包，以试图启动并运行它，位于 dev-dependencies
"name": "graphql-express-app",
"version": "0.0.4",
"description": "Academind's YouTube Series on GraphQL-Express-React",
"main": "app.js",
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js"
,
"keywords": [
"graphql",
"express",
"node.js"
],
"author": "",
"license": "ISC",
"dependencies":
"@babel/preset-stage-2": "^7.0.0",
"babel-preset-stage-2": "^6.24.1",
"body-parser": "^1.18.3",
"express": "^4.16.4",
"express-graphql": "^0.7.1",
"graphql": "^14.0.2",
"mongoose": "^5.4.1"
,
"devDependencies":
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/register": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"nodemon": "^1.18.9"
【问题讨论】：
在将代码传递给 node.js 之前，您是否使用 babel（使用文件观察器）编译代码？如果是，您的文件观察器是什么样的？app.js 是什么 - 你的原始源文件，还是 Babel 生成的文件（通过文件观察器）？
我将通过快照更新问题的更多细节。
@lena 已经使用来自 IDE 和相关文件的更多信息更新了查询。
我实际上是从简单的npm start 配置开始的，一旦我在代码中编写了... 运算符，我遇到了一些问题，然后我继续进行了上面提到的所有配置。
【参考方案1】：
我删除了您的示例，并添加了启动和运行所需的最小版本。
基本上，您缺少的是 babel 实际运行并转译您的代码的部分。不知道webstorm有没有给你做，我用的是VS code。
.babelrc：
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
package.json（仅限部门和脚本，其余省略）：
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --exec babel-node app.js"
,
"devDependencies":
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"nodemon": "^1.18.9"
最小的app.js：
const o =
a: 'a',
b: 'b',
;
const o2 = ...o ;
console.log(o2);
// Outputs: a: 'a', b: 'b'
您可以通过使用最新版本来避免转换 nodejs 代码。从 8.6.0 版本开始，节点支持扩展运算符：https://node.green/#ES2018-features-object-rest-spread-properties
希望有帮助！
【讨论】：
非常感谢！我设法考虑了您的两个建议。更新了node v8.0.0 -> 10.5.0 和你的 babel 设置。以上是关于即使在 Webstorm 2018.3 中的 Babel 配置之后，Spread Operator 也会抛出 SyntaxError的主要内容，如果未能解决你的问题，请参考以下文章