babel-node vs node:带有导入/导出功能的 graphql 文件

Question

看起来

NodeJS 不理解 graphql 文件中的导入/导出命令(扩展名 .gql(，但 babel-node 可以。 我能想到的唯一解决方法是将 .gql 文件重命名为 .js 个文件，但我丢失了语法突出显示。

有没有一个简单的修复方法可以在文件非js扩展名中导入/导出节点荣誉？附上我的包.json; npm run dev有效，但npm run build; npm run start不起作用：

{
"name": "MyAPI",
"version": "1.0.0",
"description": "MyAPI using GraphQL",
"main": "api/server.js",
"scripts": {
    "build": "babel api -d src --copy-files",
    "start": "node src/server.js",
    "debug": "babel-node --inspect api/server.js",
    "dev": "nodemon api/server.js --watch api --watch tests --ext js,gql --exec babel-node",
    "lint": "eslint api,tests",
    "test": "mocha --require babel-core/register tests"
},
"author": "JML",
"devDependencies": {
    "apollo-client": "^2.0.2",
    "apollo-client-preset": "^1.0.2",
    "babel-eslint": "^7.2.1",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-async-generator-functions": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "chai": "^4.1.2",
    "chai-subset": "^1.6.0",
    "eslint": "^4.3.0",
    "eslint-plugin-babel": "^4.1.2",
    "graphql": "^0.10.5",
    "mocha": "^4.0.1",
    "node-fetch": "^1.7.3",
    "nodemon": "^1.11.0",
    "randexp": "^0.4.6"
},
"dependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.25.0",
    "babel-preset-latest": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "body-parser": "^1.17.1",
    "casual": "^1.5.14",
    "cors": "^2.8.4",
    "eslint": "^4.10.0",
    "express": "^4.15.2",
    "graphql-server-express": "1.0.4",
    "graphql-tag": "^2.5.0",
    "graphql-tools": "^1.1.0",
    "lodash": "^4.17.4",
    "mysql": "^2.14.1",
    "nano": "^6.4.2",
    "treeize": "^2.1.2"
}

}

Answer 1

npm install babel-cli babel-preset-env

安装这些后，它将在根级别创建填充的 .babelrc 文件。 您不需要修改。 然后，您需要将这些配置加载到 package.json 中的启动脚本中。

"start": "nodemon src/index.js --ext js,graphql --exec babel-node  ",

如果你不知道 nodemon ，你需要全局安装它，它将监视 src/index.js 文件。

--ext js, graphql//这是可选的。 它将具有 VSCODE 来着色代码。

最后，您需要配置 babel 以支持对象传播运算符。

npm install babel-plugin-transform-object-rest-spread

然后将这个"transform-object-rest-spread"添加到.babelrc文件中的插件数组中。

.babelrc

{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    "transform-class-properties",
    "transform-decorators",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-object-rest-spread"
  ]
}