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

Question

我正在尝试写 new phaser plugin and am having issues with ES6 class imports across files. The current setup builds fine, and you can see the output 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
};

编辑：

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

编辑：

我目前正在使用这个 transition plugin from NPM, and I've found that if I download it directly from the source 并尝试引用它，我有同样的错误......即使它在 NPM 中工作正常。

工作：1.npm install phaser-state-transition --save2.通过import 'phaser-state-transition';

消费

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

消费

编辑：

所以，如果我在 GitHub 回购和我自己的回购上使用缩小版本（使用 uglify 插件构建），它就可以工作。不知道为什么这行得通，但非缩小版行不通。

Answer 1

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

中看到我更详细的描述

可能的解决方案是：

不需要上一个包（您的插件）。如果您要分发插件，这也是您想要做的。
如您所见，缩小它。
在制作第二个捆绑包（游戏）时使用 noParse 选项。

另见。

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

Module cannot be found when attempting to use custom ES6 Phaser.Plugin in a project

browserify

gruntjs

ecmascript-6

phaser-framework

babeljs