Pertanyaan Grunt dengan babel dan browserify


Saya memiliki proyek JavaScript sederhana yang menggunakan Babel untuk mentransmisikan ECMAScript 6 ke ES5 dan kemudian membutuhkan Browserify untuk memanfaatkan Modul ES6.

Karena itu, saya datang dengan ini Gruntfile.js untuk mengkompilasinya:

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 berjalan dengan baik tanpa kesalahan. Namun, saya mendapatkan kesalahan berikut:

Uncaught SyntaxError: Unexpected reserved word di export Uncaught SyntaxError: Unexpected reserved word di import

Pada dasarnya apa yang saya lakukan di file utama adalah sebagai berikut:

export class Game {
    ...
}

Dan kemudian mengimpornya seperti:

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

Saya melakukan semua kode sesuai dengan ECMAScript 6. Namun, ekspor / impor sepertinya tidak berfungsi dan malah bertabrakan dengan kata-kata yang dilindungi JavaScript (meskipun saya memiliki browserify.js kerja).


4
2018-03-27 04:03


asal


Jawaban:


Tidak harus Anda browserify file yang dibuat setelah babel tugas? Perhatikan bahwa nama properti adalah file tujuan dan nilai setelah : adalah file sumber. (Saya berasumsi bahwa file ES6 Anda dipanggil filename.js dari pada filename_babel.js)

files: {
   "destination_file": "src_file"
}

Yang mengarah ke:

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"
        }
      }
    }
  });

atau hanya lib/pentagine_babel.js": "lib/pentagine_babel.js" untuk browserify file yang sama.


5
2018-03-27 06:43