30

ECMAScript 6 (BabelJS でトランスパイルし、Br​​owserify でブラウザ化) を使用してフロントエンド コードを作成しているため、1 つのファイルにクラスを格納し、それをエクスポートして、別のファイルにインポートできます。

私がこれをやっている方法は次のとおりです。

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

4

2 に答える 2

13

少し異なるファイル構成を使用していたため、Node.js で「require」構文を機能させるのが少し難しくなりましたが、この投稿では、babel 化されたバージョンのファイル名を使用する方法についてのヒントを得ることができました。

FileWatcher オプションを Babel に設定して WebStorm を使用しています。FileWatcher を設定して、すべてのファイルをサフィックス .jsx で監視し、コンパイル済み出力ファイルの名前を {my_file}.jsx から {my_file}-compiled.js に変更します。

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

Person.jsx:

class Person { ... }

export { Person as default}

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

テスト.jsx:

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

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

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

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

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

于 2016-01-07T22:17:42.100 に答える