用babel和browserify咕嚕咕嚕

Question

我有一個簡單的JavaScript項目，它使用Babel將ECMAScript 6轉換為ES5，然后需要Browserify來利用ES6的模塊。

就這樣，我想出了這個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 Uncaught SyntaxError: Unexpected reserved word import Uncaught SyntaxError: Unexpected reserved word

基本上我在主文件中做的是以下內容：

export class Game {
    ...
}

然后導入它像：

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

我正在根據ECMAScript 6執行所有代碼。但是，導出/導入似乎沒有工作，而是與JavaScript保留字沖突（盡管我使用browserify.js工作）。

Answer 1

你不應該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相同的文件。