4

Babel を使用して ECMAScript 6 を ES5 にトランスパイルし、ES6 のモジュールを利用するには Browserify が必要な単純な JavaScript プロジェクトがあります。

Gruntfile.jsそのため、コンパイルするためにこれを思いつきました：

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

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

  grunt.initConfig({
    "babel": {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          "lib/pentagine.js": "lib/pentagine_babel.js",
          "demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
        }
      }
    },

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

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

gruntエラーなしで正常に実行されます。ただし、次のエラーが発生します。

Uncaught SyntaxError: Unexpected reserved wordにexport Uncaught SyntaxError: Unexpected reserved word_import

基本的に、メインファイルで行っていることは次のとおりです。

export class Game {
    ...
}

そして、次のようにインポートします。

import {Sprite, Game} from "lib/pentagine";

ECMAScript 6 に従ってすべてのコードを実行しています。ただし、エクスポート/インポートが機能していないようで、代わりに JavaScript の予約語と衝突しています (私がbrowserify.js機能しているにもかかわらず)。

4

1 に答える 1

5

タスクbrowserifyの後に作成されたファイルは必要ありませんか? babelプロパティ名が宛先ファイルで、 の後の値:がソース ファイルであることに注意してください。（ES6ファイルはfilename.js代わりに呼び出されると思いますfilename_babel.js）

files: {
   "destination_file": "src_file"
}

これは次のことにつながります。

grunt.initConfig({
    "babel": {
      options: {
        sourceMap: true
      },
      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"
        }
      }
    }
  });

または単に同じファイルlib/pentagine_babel.js": "lib/pentagine_babel.js"に。browserify

于 2015-03-27T06:43:52.150 に答える