javascript - 使用 babel 和 browserify 进行 Grunt

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 在 exportUncaught SyntaxError: Unexpected reserved word on 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 同一个文件。