尝试在项目中使用自定义 ES6 Phaser.Plugin 时找不到模块答案

【问题标题】：Module cannot be found when attempting to use custom ES6 Phaser.Plugin in a project尝试在项目中使用自定义 ES6 Phaser.Plugin 时找不到模块
【发布时间】：2017-01-03 18:44:06
【问题描述】：

我正在尝试编写new phaser plugin，但在跨文件导入 ES6 类时遇到问题。当前设置构建良好，您可以看到输出here。但是，当我尝试在实际的 Phaser 游戏中使用已编译的插件时...

import '../plugins/phaser-dynamic-state-transition';

我的 linter 发现了错误

Cannot find module './TransitionStateManager' from '~/src/plugins'

由此，我知道它正在成功找到内置的 ES5 插件并尝试将其导入游戏。此外，当插件的 src 中只有 1 个文件时，它是成功的。当添加第二个文件 TransitionStateManager 时，游戏中会出现问题，尽管它编译得很好。

关于为什么会发生这种情况的任何想法？

编辑：

您可以在 GitHub 存储库 here 中查看所有代码。但是，为了方便，这里是我的 Gruntfile.js

  module.exports = function (grunt) {
   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),

      //allow import/export of JS classes
      browserify: {
         dist: {
            options: {
               transform: [ //transform ES6 code to ES5 code
                  ["babelify", {
                     loose: "all"
                  }]
               ]
            },
            files: {
               "./dist/<%= pkg.name %>.js": ["./src/index.js"]
            }
         }
      },

      //turn the output js file into a minified file (use less kB)
      uglify: {
          dist: {
              files: {
                  "./dist/<%= pkg.name %>.min.js": ["./dist/<%= pkg.name %>.js"]
              }
          }
      },

      //define the watch task: build when you save an edit
      watch: {
         scripts: {
            files: ["./src/*.js"],
            tasks: ["build"]
         }
      }
   });

   grunt.loadNpmTasks("grunt-browserify");
   grunt.loadNpmTasks("grunt-contrib-watch");
   grunt.loadNpmTasks("grunt-contrib-uglify");

   grunt.registerTask("build", ["browserify","uglify"]);//define the modules that will run in the build task
   grunt.registerTask("default", ["build","watch"]); //build and then start watching the files for changes
};

编辑：

我运行grunt，源文件被捆绑并输出到一个文件中。我把那个文件复制到我的游戏项目的src/plugins 文件夹中。在我的src 文件夹中，我有文件Preload.js，其中包含import '../plugins/phaser-dynamic-state-transition'; 行。此时我有 Gulp 错误，告诉我 './TransitionStateManager' 丢失。

编辑：

我目前正在使用来自 NPM 的 transition plugin，我发现如果我直接下载它 from the source 并尝试引用它，我会遇到同样的错误......即使它在 NPM 上运行良好.

工作：1.npm install phaser-state-transition --save 2.通过import 'phaser-state-transition';消费

不工作：1.Download the source 2.通过import '../plugins/phaser-state-transition';消费

编辑：

所以，如果我在 GitHub 存储库和我自己的存储库中使用缩小版（使用 uglify 插件构建），它就可以工作。不知道为什么会这样，但非缩小版却不行。

【问题讨论】：

您能否在问题中包含您的 browserify 配置？
已更新。感谢您的观看！
您提到您正在尝试使用已编译的插件（您的意思是构建的捆绑包吗？）；您如何尝试使用/消费它？
@James 使用插件的移相器游戏也被浏览器化了吗？通常这种情况发生在您尝试 Browserify 时会拉入 Browserify 包，原因我在 substack/node-browserify#1151 中解释。正如您发现的那样，正如我在那儿和here 中提到的那样，缩小是一种解决方案。您可以取消它的要求，以减少对源的干扰（如果您要分发它，您应该这样做），或者使用带有缩小的源映射。
感谢@JamesLowrey！我认为这里有某种规范的答案功能...我应该研究一下，看看我是否可以为此创建一个并将所有问题指向它，因为它们每个听起来可能非常不同，但具有相同的根本原因.

标签： gruntjs ecmascript-6 browserify babeljs phaser-framework

【解决方案1】：

当之前的 Browserify 包（您的插件）位于当前正在被 Browserified（您的游戏）的依赖关系图中时，可能会发生这种情况。简而言之，Browserify 无法识别之前的包现在是自包含的，并尝试解析其中的 require() 调用。你可以在substack/node-browserify#1151看到我更详细的描述。

可能的解决方案是：

不再需要之前的捆绑包（您的插件）。如果您要分发插件，这也是您想要做的。
按照您的发现缩小它。
在进行第二个捆绑包（游戏）时使用noParse 选项。

另见https://stackoverflow.com/a/28176927/1034448。

【讨论】：