使用 ES6 (Babel) 导出一个类答案

【问题标题】：Exporting a class with ES6 (Babel)使用 ES6 (Babel) 导出一个类
【发布时间】：2023-03-12 01:55:01
【问题描述】：

我正在使用 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 错误，所以我确定它是正确的文件。

【问题讨论】：

你需要export default Game

标签： javascript gruntjs browserify ecmascript-6 babeljs

【解决方案1】：

Browserify 旨在提供一个“入口点”文件，通过该文件递归遍历您的所有 require 语句，从其他模块导入代码。所以你应该require'ing _babel.js 版本的模块，而不是_browserified.js 。

从外观上看，您打算将应用程序的“入口点”设为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"。

为我工作。让我知道这是否足够，或者我在这里误解了您的要求。

附：你可以使用babelify 来避免 Babel 和 Browserify 有单独的 Grunt 任务。例如，请参阅我的回答 here。

【讨论】：

【解决方案2】：

我的文件配置略有不同，这让我很难让“require”语法在 Node 中工作，但这篇文章给了我关于如何使用文件名的 babel 化版本的提示。

我正在使用 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');

在我使用“./”开始文件路径并添加“-compiled.js”以正确指定文件名以便节点 es5 可以找到模块之前，我无法使用“require”语句来查找模块模块。

我还能够使用“导入”语法：

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

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

【讨论】：