如何将src/app.js关联Babel？Git Bash提示该文件不存在

一、解决Git Bash中提示src/app.js不存在的问题 #

按以下步骤排查：

• 确认当前工作目录：在Git Bash中执行 pwd，输出路径必须是项目根目录（即包含src文件夹的目录）。若不是，用 cd 你的项目根目录路径 切换目录。
• 验证文件是否存在：执行 ls src/，查看输出里是否有app.js。若不存在，先创建该文件再执行编译命令。
• 检查路径拼写：注意文件名大小写（比如实际是App.js的话，命令里写app.js会找不到），以及文件夹层级是否正确（确保app.js直接在src目录下，而非子文件夹中）。
• 局部安装Babel需加npx：如果是通过npm install --save-dev @babel/core @babel/cli局部安装的Babel，直接执行babel命令可能调用全局版本，导致找不到项目文件。此时要在命令前加npx，示例：

  npx babel src/app.js --out-file=public/scripts/app.js --presets="@babel/preset-env,@babel/preset-react"
  

二、将src/app.js与Babel关联的两种方式 #

方式1：命令行直接关联（临时场景用） #

先安装必要依赖包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

再执行编译命令（注意新版本preset包名需加@babel/前缀）：

npx babel src/app.js --out-file=public/scripts/app.js --presets="@babel/preset-env,@babel/preset-react"

方式2：配置文件关联（推荐长期使用） #

无需每次命令都携带presets参数，更高效规范：

1. 在项目根目录创建.babelrc文件，写入以下内容：

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }
   

   或者直接在package.json中添加babel配置字段：

   "babel": {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }
   

2. 之后编译命令可简化为：

   npx babel src/app.js --out-file public/scripts/app.js
   

3. 还可在package.json的scripts中添加快捷命令：

   "scripts": {
     "build-js": "babel src/app.js --out-file public/scripts/app.js"
   }
   

   后续直接执行npm run build-js即可完成编译。

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