Question

我正在用ECMAScript 6编写一些前端代码（用BabelJS编译，然后用Browserify进行浏览），这样我就可以在一个文件中创建一个类，将其导出并导入到另一个文件中。

我这样做的方式是：

export class Game {
    constructor(settings) {

    ...

    }
}

然后在导入我所做的类的文件上：

import {Game} from "../../lib/pentagine_browserified.js";
var myGame = new Game(settings);

然后我用grunt编译它，这是我的Gruntfile：

module.exports = function(grunt) {
  "use strict";

  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-browserify');

  grunt.initConfig({
    "babel": {
      options: {

        sourceMap: false
      },
      dist: {
        files: {
          "lib/pentagine_babel.js": "lib/pentagine.js",
          "demos/helicopter_game/PlayState_babel.js": "demos/helicopter_game/PlayState.js"
        }
      }
    },

    "browserify": {
      dist: {
        files: {
          "lib/pentagine_browserified.js": "lib/pentagine_babel.js",
          "demos/helicopter_game/PlayState_browserified.js": "demos/helicopter_game/PlayState_babel.js"
        }
      }
    }
  });

  grunt.registerTask("default", ["babel", "browserify"]);
};

但是，在new Game(电话中，我收到以下错误：

Uncaught TypeError: undefined is not a function

同样，我所做的是通过Babel和Browserify分析生成的代码，我在PlayState_browserified.js上找到了这一行：

var Game = require("../../lib/pentagine_browserified.js").Game;

我决定打印require输出：

console.log(require("../../lib/pentagine_browserified.js"));

它只不过是一个空物。我决定查看pentagine_browserified.js文件：

var Game = exports.Game = (function () {

它似乎正确地导出了类，但由于其他原因，在其他文件中不需要它。

另外，我确定文件正确被要求正确，因为更改字符串"../../lib/pentagine_browserified.js"会发出Not Found错误，所以它是针对正确的文件，我确定。

Answer 1

Browserify旨在提供一个单一的入口点＆＃34;文件，通过它递归遍历所有require语句，从其他模块导入代码。因此，您应require _babel.js版本的模块，而不是_browserified.js个。

从它的外观来看，你打算使用你的应用程序＆＃34;入口点＆＃34;是demos/helicopter_game/PlayState_browserified.js，是吗？如果是这样的话：

在PlayState.js中，将其更改为import {Game} from "../../lib/pentagine_babel.js";。
在Gruntfile.js中，删除"lib/pentagine_browserified.js": "lib/pentagine_babel.js"。

适合我。如果这样就足够了，或者我在这里误解了您的要求，请告诉我。

P.S。您可以使用babelify来避免为Babel和Browserify分别执行Grunt任务。请参阅我的回答here以获取示例。

Answer 2

我有一个稍微不同的文件配置，这让我在Node中使用“require”语法有些困难，但这篇文章给了我关于如何使用文件名的babel-ified版本的提示。 / p>

我正在使用WebStorm并将FileWatcher选项设置为Babel，并且我将FileWatcher配置为监视所有带有后缀.jsx的文件，并将编译后的输出文件从{my_file} .jsx重命名为{my_file} -compiled.js

所以在我的测试用例中，我有2个文件：

Person.jsx：

class Person { ... }

export { Person as default}

和另一个想要导入它的文件：

Test.jsx：

var Person = require('./Person-compiled.js');

我无法获取“require”语句来查找模块，直到我使用'./'启动文件路径并添加'-compiled.js'以正确指定文件名，以便Node es5可以找到模块。

我也可以使用“导入”语法：

import Person from './Person-compiled.js';

由于我已将WebStorm项目设置为Node ES5项目，因此我必须运行'Test-compiled.js'（而不是'Test.jsx'）。

使用ES6导出类（Babel）

2 个答案: