和babel一起哼哼，浏览

Grunt with babel and browserify

本文关键字：浏览 一起 babel      更新时间：2023-09-26

我有一个简单的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上import 上的Uncaught SyntaxError: Unexpected reserved word

基本上，我在主文件中所做的是：

export class Game {
    ...
}

然后像一样导入

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

我正在根据ECMAScript 6编写所有代码。然而，导出/导入似乎不起作用，反而与JavaScript保留字发生冲突（尽管我使用了browserify.js）。

您不应该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"
        }
      }
    }
  });

或者仅仅CCD_ 13到CCD_。

相关文章：