web-dev-qa-db-ja.com

ES6でクラスをエクスポートする（Babel）

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エラーが発生するため、ファイルが適切に必要であると確信しています。

javascriptgruntjsbrowserifyecmascript-6babeljs
27
David Gomes

Browserifyには単一の「エントリポイント」ファイルが供給され、requireステートメントのすべてを再帰的に走査して、他のモジュールからコードをインポートします。したがって、_babel.jsモジュールではなく、_browserified.jsバージョンのモジュールをrequire 'ingする必要があります。

見た目から、アプリの「エントリポイント」を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 をご覧ください。

18
XåpplI'-I0llwlg'I -

私は少し異なるファイル構成を持っていたため、Nodeで「require」構文を動作させるのに多少の困難を感じましたが、この投稿ではファイル名のbabel化バージョンの使用方法に関するヒントを示しました。

FileWatcherオプションをBabelに設定してWebStormを使用し、拡張子が.jsxのすべてのファイルを監視し、コンパイル済みの出力ファイルの名前を{my_file} .jsxから{my_file} -compiled.jsに変更するようにFileWatcherを設定しています。

したがって、私のテストケースでは、2つのファイルがあります。

Person.jsx：

class Person { ... }

export { Person as default}

そしてそれをインポートしたい別のファイル：

Test.jsx：

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

'./'でファイルパスを開始し、Node es5になるようにファイル名を適切に指定するために '-compiled.js'を追加するまで、モジュールを見つけるための "require"ステートメントを取得できませんでしたモジュールが見つかりました。

「インポート」構文も使用できました。

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

WebStormプロジェクトをNode ES5プロジェクトとして設定したので、「Test.comxed.js」ではなく「Test-compiled.js」を実行する必要があります。

14
Stefan Musarra