使用import引入GraphQLServer报SyntaxError，求底层原理解答

Hey，我特别理解你不想只是换个写法绕过问题、想搞懂底层逻辑的想法——这才是学Node.js的正确姿势！咱们一步步拆解这个问题，从根儿上弄明白为啥会报错，以及怎么解决。

核心原理：Node.js的两种模块系统差异 #

首先得明确：Node.js一开始原生只支持CommonJS模块系统（就是你用的require和module.exports那套），而ES6的import/export模块语法是后来才逐步支持的。在你当前的环境下，Node.js默认不会直接解析.js文件里的import语法，所以直接写会抛出Unexpected token {的语法错误；而require是Node.js原生认识的，所以能正常运行。

那Babel是干啥的？它就是个“翻译官”，能把ES6+的新语法转译成Node.js（或者浏览器）能理解的旧版JS语法——包括把import转成require。但前提是你得告诉Babel怎么“翻译”，也就是配置要到位。

你的问题出在哪？ #

看你的依赖列表，你已经装了babel-cli和babel-preset-es2015，但大概率是这两个环节没做好：

1. 没给Babel配置规则：Babel不知道要用哪个预设来转译你的代码，需要一个配置文件告诉它。
2. 启动方式不对：你可能直接用nodemon跑原文件，没让Babel先转译，导致Node.js直接读到不认识的import语法。

一步步解决（从原理到实践） #

1. 给Babel加配置文件 #

在项目根目录新建一个.babelrc文件，内容如下：

{
  "presets": ["es2015"]
}

这个文件的意思是：“Babel啊，你用es2015这个预设来转译我的代码”——es2015预设包含了所有ES6语法的转译规则，其中就包括把import转换成require。

2. 修改启动命令，让Babel先处理代码 #

打开你的package.json，把scripts部分改成这样：

"scripts": {
  "start": "babel-node index.js",
  "dev": "nodemon --exec babel-node index.js"
}

解释一下：

• babel-node是babel-cli提供的工具，它会先把你的ES6代码转译成Node.js能懂的代码，再交给Node.js执行。
• nodemon --exec babel-node是让nodemon在文件变化时，自动用babel-node重新执行你的代码，方便开发。

3. 验证转译效果（搞懂底层到底发生了啥） #

你可以手动执行Babel转译命令，看看你的代码被翻译成啥样了：

babel index.js --out-file compiled.js

打开生成的compiled.js，你会发现原来的import { GraphQLServer } from 'graphql-yoga';已经变成了和const { GraphQLServer } = require('graphql-yoga');几乎一样的代码——这就是为啥转译后能正常运行的原因：本质上还是用了Node.js原生支持的CommonJS模块，只是Babel帮你做了语法转换。

4. 进阶：用Node.js原生ES模块（不用Babel） #

如果你不想依赖Babel，想用Node.js原生支持的ES6模块，也可以试试：

• 要么把你的文件后缀改成.mjs
• 要么在package.json里添加"type": "module"
  不过要注意：
• 你的Node.js版本得至少是v14.13.0（更早版本需要加--experimental-modules参数）
• 不能再混用require语法，得全换成ES模块写法
• 还要确认graphql-yoga@1.18.3是否支持原生ES模块（一般来说没问题，但最好测试一下）

但回到你的当前场景，用Babel的方案更贴合你已有的依赖配置。

总结一下 #

报错的根本逻辑就是：

1. Node.js默认不认识.js文件里的import语法
2. 你的代码没经过Babel转译，直接被Node.js读取，所以抛出语法错误
3. require是Node.js原生支持的CommonJS语法，所以能正常运行

通过配置Babel并使用babel-node执行，既解决了问题，也搞懂了模块系统和代码转译的底层原理，这比单纯换个写法有价值多了！

内容的提问来源于stack exchange，提问作者SBU