用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上import

基本上我在主文件中做的是以下内容:

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同一个文件.