基于Webpack+Babel在Phaser框架中实现ES6原型导入导出的问题

嘿，我之前维护Phaser老项目时也碰到过一模一样的困境——旧代码都是挂载到全局的构造函数写法，又不能改原代码库，还要用Webpack+Babel做ES模块兼容。针对你给出的AchievementManager代码，给你几个实用的解决方案：

方案1：用Webpack ProvidePlugin全局注入 #

Webpack的ProvidePlugin可以帮你把全局变量自动注入到模块中，不用手动去全局作用域取：

1. 打开你的webpack.config.js，在plugins里添加配置：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      AchievementManager: 'AchievementManager'
    })
  ]
};

2. 之后你就能在任意ES模块里直接使用AchievementManager了，甚至不用写import语句：

// 你的模块文件
const achievementManager = new AchievementManager(gameInstance);

方案2：封装兼容层（Wrapper） #

如果不想改动Webpack配置，可以给旧代码写个简单的封装模块，把全局变量转成ES模块导出：

1. 新建一个achievement-manager-wrapper.js文件：

// 先确保原代码已经被加载（根据你的项目结构调整路径）
import './path/to/original/achievement-manager-file.js';

// 把全局的AchievementManager导出
export default window.AchievementManager;

2. 在需要使用的地方导入这个封装模块：

import AchievementManager from './achievement-manager-wrapper.js';

const manager = new AchievementManager(gameInstance);

方案3：调整代码加载顺序 #

如果你的Webpack entry是多文件入口，确保原AchievementManager的代码文件在你的ES模块之前加载，这样当你的模块执行时，AchievementManager已经存在于全局作用域，你可以直接在模块里使用，甚至手动把它导出：

// 你的模块文件
// 因为原代码已提前加载，全局变量存在
export const AchievementManager = window.AchievementManager;

// 然后正常使用
const manager = new AchievementManager(gameInstance);

关键注意点 #

• 要避免Webpack把原代码当成“未使用代码”tree shake掉，如果你用了方案2或3，可以在webpack配置里给原代码文件添加sideEffects: true：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /path\/to\/original\/achievement-manager-file.js$/,
        sideEffects: true
      }
    ]
  }
};

• 原代码是老式的构造函数写法，没有ES模块的export，所以直接import原文件会报错，必须通过全局作用域中转。

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