如何在Webpack-Dev-Middleware+Express环境下让ES6模块跨前后端复用？

问题分析 #

你遇到的核心矛盾是：component.js用ES6的默认导出语法，Webpack+Babel能正常转译处理，但Node.js直接require时会因不识别export语法报错——因为Node默认只支持CommonJS模块，而你没有对服务器端的组件代码做转译，又不想做两次Babel编译（既麻烦又低效）。

下面是几个优雅的解决方案，按场景推荐：

方案1：让组件同时兼容CommonJS和ES模块（无需额外依赖） #

直接修改component.js，同时提供两种模块导出方式，让Node和Webpack都能正确识别：

function myComponent() {
  console.log("Hello, World!");
}

// 先导出CommonJS格式，供Node.js的require使用
module.exports = myComponent;
// 再导出ES模块格式，供Webpack的import使用
export default myComponent;

或者更简洁的写法（利用模块加载器的优先级）：

export default function myComponent() {
  console.log("Hello, World!");
}

// 仅在CommonJS环境下补充导出
if (typeof module !== 'undefined' && module.exports) {
  module.exports = myComponent;
}

优点：不需要安装任何额外依赖，修改单个组件即可生效，适合小型项目或单个组件的场景。
缺点：如果有大量组件，每个都要修改会比较繁琐。

方案2：用Babel实时转译服务器端代码（推荐多组件场景） #

通过@babel/register让Node.js在运行时实时转译ES6模块，无需提前编译，也不用修改组件代码：

步骤1：安装依赖 #

npm install --save-dev @babel/register @babel/core @babel/preset-env

步骤2：修改server.js的开头 #

在所有require语句之前，先引入Babel注册器：

// 先配置Babel实时转译
require('@babel/register')({
  presets: ['@babel/preset-env'],
  // 可选：指定需要转译的文件后缀，默认是.js,.jsx,.es6,.es,.mjs
  extensions: ['.js']
});

// 之后正常引入组件，注意要取.default属性（Babel转译ES默认导出后会挂载到default上）
const myComponent = require("./component").default;
myComponent();

// 剩下的Express和Webpack配置保持不变
const express = require("express");
const app = express();
// ... 后续代码省略

优点：一次性配置，所有ES6组件都能被Node正常识别，不需要修改组件代码，适合中大型项目。
缺点：第一次启动服务器时会有轻微的转译开销，但开发环境下几乎可以忽略；生产环境如果追求性能，可以提前用Babel编译服务器代码，但开发阶段用@babel/register足够方便。

方案3：统一用ES模块（需调整项目配置） #

如果你的项目愿意全面切换到ES模块，可以：

1. 在package.json中添加"type": "module"
2. 将server.js的require改为import语法：

import express from "express";
import webpack from "webpack";
import webpackConfig from "./webpack.config.js";
import myComponent from "./component.js";

myComponent();

const app = express();
// ... 后续代码省略

3. 确保Webpack配置也兼容ES模块（Webpack 5+默认支持）

优点：彻底统一模块系统，避免两种格式的兼容问题。
缺点：需要修改现有CommonJS风格的代码，可能会和一些仅支持CommonJS的第三方包冲突。

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