如何在RequireJS项目中集成ES6 Module(import/export)语法？

嘿，结合你的项目现状——开发阶段直接跑现代浏览器、生产用r.js+Babel构建，我整理了几个靠谱的方案，能让你顺利开发ES6模块同时兼容RequireJS：

方案1：ES6模块双导出（原生+AMD），开发生产无缝衔接 #

这是最轻便的方案，不需要额外工具，直接在你写的ES6模块里同时做原生ES导出和AMD导出，让RequireJS和现代浏览器都能识别：

// 你的ES6模块：my-es-module.js
const calculateTotal = (items) => items.reduce((sum, item) => sum + item.price, 0);

// 给RequireJS的AMD导出
if (typeof define === 'function' && define.amd) {
  define([], () => ({ calculateTotal }));
}

// 原生ES模块导出
export { calculateTotal };

• 开发阶段：现代浏览器直接通过import加载这个模块，RequireJS也能通过require(['my-es-module'], ...)正常调用；
• 生产阶段：r.js打包时，Babel会自动把ES6语法转成ES5，同时把双导出的模块统一处理成AMD格式，完全兼容原有构建流程。

方案2：开发阶段用Babel浏览器端实时转译ES6到AMD #

如果不想改模块代码，可以在开发环境引入Babel的standalone脚本，实时把ES6模块转成RequireJS能识别的AMD格式：

<!-- 先加载RequireJS -->
<script src="path/to/require.js"></script>
<!-- 引入Babel standalone -->
<script src="path/to/babel.min.js"></script>
<!-- 配置Babel将ES6模块转译为AMD -->
<script>
  Babel.registerPreset('amd-preset', {
    presets: [Babel.availablePresets.es2020],
    plugins: [['transform-modules-amd', { loose: true }]]
  });
</script>
<!-- 加载你的ES6模块，指定用Babel转译 -->
<script type="text/babel" data-presets="amd-preset" src="path/to/your-es6-module.js"></script>
<!-- RequireJS入口逻辑 -->
<script>
  require(['your-es6-module'], (module) => {
    module.yourFunction();
  });
</script>

⚠️ 注意：这个方案仅适合开发阶段，浏览器端转译有性能损耗，生产环境还是用你原有的r.js+Babel构建流程即可。

方案3：以ES模块为入口，混合加载RequireJS模块 #

如果想逐步把项目迁移到ES模块，可以把入口改成ES模块，然后通过RequireJS加载原有AMD模块：

// ES模块入口：main-es.js
// 先导入RequireJS
import requirejs from './path/to/require.js';

// 配置RequireJS
requirejs.config({
  baseUrl: 'js',
  // 开启ES模块兼容，让AMD模块能被ES模块正确导入
  esModule: true
});

// 加载原有AMD模块（用await配合Promise）
const legacyAuthModule = await requirejs(['auth']);
// 加载新写的ES6模块
import { userDashboard } from './user-dashboard.js';

// 混合使用
legacyAuthModule.login('user@example.com');
userDashboard.render();

然后在HTML里用原生模块方式加载入口：

<script type="module" src="main-es.js"></script>

这个方案适合渐进式迁移，开发阶段不用构建，生产打包时r.js会把所有模块（AMD+ES）统一处理。

额外注意事项 #

• 开发阶段务必用本地服务器（比如npx serve）打开页面，不要直接用file://协议，否则ES模块会触发CORS错误；
• 生产打包时确保Babel的模块转换配置和r.js兼容，推荐把Babel的modules选项设为amd，让转译后的代码直接符合RequireJS规范。

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