如何阻止Babel将import语法转换为require语法？

当然可以，核心是调整Babel的模块转换配置，让它保留原生ES模块的import/export语法，而不是转成CommonJS的require。具体操作如下：

1. 修改Babel基础配置文件
   找到你的Babel配置文件（比如babel.config.json、.babelrc，或者package.json中的babel字段），在@babel/preset-env预设中添加modules: false选项：

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

   这个配置会明确告诉Babel：不要转换ES模块语法，保留原生的import和export语句。

2. 针对Create React App的特殊处理
   如果你用Create React App初始化项目，默认配置被隐藏，需要借助craco工具修改：

   • 先安装依赖：npm install @craco/craco --save-dev
   • 在项目根目录创建craco.config.js，写入如下配置：

     module.exports = {
       babel: {
         presets: [
           ["@babel/preset-env", { "modules": false }],
           "@babel/preset-react"
         ]
       }
     };
     

   • 修改package.json中的启动脚本，替换默认的react-scripts：

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
     

3. 额外注意点

   • 保留import语法后，转换后的代码可直接在支持ES模块的现代浏览器中运行，或配合Rollup、Vite等打包工具使用。
   • 若需兼容不支持ES模块的旧浏览器，建议用打包工具处理模块兼容，而非依赖Babel转换模块语法。

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