如何在Node 8.11.1环境中同时转译JS/JSX与TS/TSX文件？

嘿，这个混合文件类型的转译问题我之前也碰到过，给你一套一步到位的解决方案，不用分开处理TS和JS，直接让Babel搞定所有类型的文件，适配你的Node 8.11.1环境：

第一步：升级/安装必要的依赖 #

你原来用的是Babel 6的presets（env、stage-2），现在我们要切换到Babel 7，它原生支持TypeScript转译，所以先装这些包：

npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread typescript

解释一下：

• @babel/preset-typescript：负责把TS/TSX的类型注解移除，转成标准JS
• 替换原来的stage-2：Babel 7废弃了stage预设，所以用plugin-proposal-class-properties和plugin-proposal-object-rest-spread来覆盖原来stage-2的核心功能
• typescript：虽然Babel不做类型检查，但这个包是preset-typescript的依赖，同时也方便你做类型校验

第二步：配置Babel #

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

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "8.11.1" } }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

这里@babel/preset-env指定了目标Node版本是8.11.1，确保转译后的代码完全兼容你的环境；三个presets会按顺序处理文件：先转TS/TSX为JS，再处理React语法，最后适配Node环境。

第三步：调整nodemon命令 #

把你原来的命令改成下面这样，让nodemon监听所有文件类型，并且告诉babel-node要处理这些后缀：

nodemon app.js --exec babel-node --extensions ".js,.jsx,.ts,.tsx"

如果你的入口文件是TS/TSX（比如app.tsx），直接把app.js换成对应的文件名就行。

可选：添加类型检查（重要！） #

注意：Babel的TypeScript预设只会移除类型注解，不会做类型检查。如果需要实时类型校验，可以在package.json的scripts里加：

"scripts": {
  "dev": "nodemon app.js --exec babel-node --extensions \".js,.jsx,.ts,.tsx\"",
  "type-check": "tsc --noEmit",
  "type-check:watch": "tsc --noEmit --watch"
}

开发时开两个终端：一个跑npm run dev，另一个跑npm run type-check:watch，就能实时看到类型错误了。

这样一套下来，不管是.js、.jsx还是.ts、.tsx文件，都会被Babel统一处理，完美解决你混合文件类型的转译需求～

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