Grunt与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运行良好，没有任何错误。然而，我遇到了以下错误：

export上的Uncaught SyntaxError: 非预期保留字 import上的Uncaught SyntaxError: 非预期保留字

基本上，在主文件中我正在做以下操作：

export class Game {
    ...
}

然后像这样导入它：

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

我正在按照ECMAScript 6的规范编写所有的代码。然而，导出/导入似乎不能正常工作，而是与JavaScript保留字产生冲突（尽管我已经使用了 browserify.js）。

- David Gomes

Answer 1

你是否应该在 babel 任务后对文件进行 browserify？请注意，属性名是目标文件名，: 后面的值是源文件名。（我假设你的 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 中，即可对同一文件进行编译。

- Pete TNT