Question

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

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

我的linter发现了错误

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

据此，我知道它已成功找到内置的ES5插件并尝试将其导入游戏。此外，当插件的src中只有一个文件时，它是成功的。当添加第二个文件TransitionStateManager时，即使编译正常，也会在游戏中出现问题。

有关为何发生这种情况的任何想法？

编辑：

您可以在GitHub repo 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 repo和我自己的repo上使用缩小版本（使用uglify插件构建），它会起作用。不知道为什么会这样，而非缩小的却不行。

Answer 1

当先前的Browserify软件包（您的插件）位于当前正在进行浏览化的依赖关系图（您的游戏）中时，可能会发生这种情况。简而言之，Browserify无法识别前一个包现在是自包含的，并尝试解析其中的require()个调用。您可以在substack/node-browserify#1151中查看更详细的说明。

可能的解决方案是：

取消查询上一个包（您的插件）。如果您要分发插件，这也是您想要做的事情。
缩小它。
在进行第二次捆绑（游戏）时使用noParse选项。

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

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

1 个答案: