Xuất khẩu một lớp học với ES6 (Babel)

Question

Tôi đang viết một số mã frontend với ECMAScript 6 (transpiled với BabelJS, và sau đó browserified với Browserify) để tôi có thể có một lớp học trong một tập tin, xuất khẩu nó và nhập nó trong một tập tin.

Con đường tôi đang làm điều này là:

export class Game { 
    constructor(settings) { 

    ... 

    } 
} 

Và sau đó vào tập tin đó nhập khẩu các lớp I làm:

import {Game} from "../../lib/pentagine_browserified.js"; 
var myGame = new Game(settings); 

sau đó tôi biên dịch nó với grunt, đây là Gruntfile của tôi :

module.exports = function(grunt) { 
    "use strict"; 

    grunt.loadNpmTasks('grunt-babel'); 
    grunt.loadNpmTasks('grunt-browserify'); 

    grunt.initConfig({ 
    "babel": { 
     options: { 

     sourceMap: false 
     }, 
     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" 
     } 
     } 
    } 
    }); 

    grunt.registerTask("default", ["babel", "browserify"]); 
}; 

Tuy nhiên, trong cuộc gọi new Game(, tôi nhận được llowing lỗi:

Uncaught TypeError: undefined is not a function 

Như vậy, những gì tôi đã làm là phân tích các mã được tạo bởi Babel và Browserify và tôi thấy dòng này trên PlayState_browserified.js:

var Game = require("../../lib/pentagine_browserified.js").Game; 

tôi quyết định in require đầu ra:

console.log(require("../../lib/pentagine_browserified.js")); 

Và nó là gì, nhưng một đối tượng rỗng. Tôi quyết định kiểm tra pentagine_browserified.js file:

var Game = exports.Game = (function() { 

Nó có vẻ như nó được xuất khẩu một cách chính xác các lớp, nhưng vì một lý do khác, nó không được yêu cầu trên các tập tin khác.

Ngoài ra, tôi chắc chắn rằng tệp đang được yêu cầu chính xác vì việc thay đổi chuỗi "../../lib/pentagine_browserified.js" sẽ phát ra lỗi Not Found, do đó, nó sẽ tìm đúng tệp mà tôi chắc chắn.

Answer 1

Trình duyệt có nghĩa là được cho ăn một tệp "điểm nhập" duy nhất, qua đó nó đệ quy đi qua tất cả các câu lệnh require của bạn, nhập mã từ các mô-đun khác. Vì vậy, bạn nên require 'ing các _babel.js các phiên bản của mô-đun, không _browserified.js người.

Từ giao diện của nó, bạn có ý định "điểm vào" của ứng dụng là demos/helicopter_game/PlayState_browserified.js, phải không? Nếu đó là trường hợp:

• Trong PlayState.js, hãy đổi thành import {Game} from "../../lib/pentagine_babel.js";.
• Trong Gruntfile.js, loại bỏ "lib/pentagine_browserified.js": "lib/pentagine_babel.js".

trình cho tôi. Hãy cho tôi biết nếu đó là đủ hoặc tôi hiểu lầm yêu cầu của bạn ở đây.

P.S. Bạn có thể sử dụng babelify để tránh có các tác vụ Grunt riêng biệt cho Babel và Browserify. Xem câu trả lời của tôi here để biết ví dụ.

Answer 2

Tôi có cấu hình tệp hơi khác, điều này khiến tôi gặp khó khăn khi nhận cú pháp "yêu cầu" để làm việc trong Nút, nhưng bài đăng này đã cho tôi gợi ý về cách sử dụng phiên bản có tên babel-ified.

Tôi đang sử dụng WebStorm với tùy chọn FileWatcher được đặt thành Babel và tôi đã định cấu hình FileWatcher để xem tất cả các tệp có đuôi .jsx và đổi tên tệp đã xuất được biên dịch từ {my_file} .jsx thành {my_file} -compiled. js.

Vì vậy, trong trường hợp thử nghiệm của tôi, tôi có 2 file:

Person.jsx:

class Person { ... } 

export { Person as default} 

và một tập tin mà muốn import nó:

Test.jsx:

var Person = require('./Person-compiled.js'); 

Tôi không thể nhận được câu lệnh "yêu cầu" để tìm mô-đun cho đến khi tôi bắt đầu đường dẫn tệp bằng './' và cũng thêm '-comp iled.js 'để xác định đúng tên tệp sao cho nút ES5 có thể tìm thấy mô-đun.

Tôi cũng đã có thể sử dụng "nhập khẩu" cú pháp:

import Person from './Person-compiled.js'; 

Kể từ khi tôi đã thiết lập dự án WebStorm của tôi như là một dự án Node ES5, tôi phải chạy 'Test-compiled.js' (không 'Test.jsx').