ngụm babel, xuất khẩu không được định nghĩa

Question

Hãy xem xét các mã ví dụ sau đây (và có lẽ tôi đang làm sai?)

var FlareCurrency = { 

}; 

export {FlareCurrency}; 

Tôi có nhiệm vụ sau đây:

gulp.task("compile:add-new-currency-minified", function(){ 
    return gulp.src('src/add-new-currency/**/*.js') 
      .pipe(babel()) 
      .pipe(concat('Flare-AddNewCurrency.js')) 
      .pipe(uglify({"preserveComments": "all"})) 
      .pipe(gulp.dest('dist/minified/')); 
}); 

Khi tôi chạy tôi này nhận được những điều sau đây:

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FlareCurrency={};exports.FlareCurrency=FlareCurrency; 

Để giải trí, tôi muốn chạy nó trong bảng điều khiển, vâng tôi biết điều đó không có gì ngoài việc tôi không mong đợi thấy điều này:

Uncaught ReferenceError: exports is not defined(…) 

Phiên bản rút gọn không:

"use strict"; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
var FlareCurrency = {}; 

exports.FlareCurrency = FlareCurrency; 

ném những lỗi tương tự. Ý tưởng?

Answer 1

Đó không thực sự là vấn đề babel, bạn chỉ đang cố gắng chạy mã CommonJS (được chuyển từ ES6 export) vào trình duyệt mà không cần chuẩn bị. CommonJS không chạy trên trình duyệt, bạn cần sử dụng công cụ để đóng gói cho trình duyệt, chẳng hạn như Webpack hoặc Browserify.

Chỉ bằng sự trùng hợp tuần này tôi đã tạo một dự án nhỏ trên Github cho thấy thiết lập mã Gulp + ES6 (sử dụng export) + Babel + Webpack: gulp-es6-webpack-example.

Trong ví dụ của tôi, bạn có thể tải mã JS trên trình duyệt hoặc đồng bộ (được tải sẵn) hoặc không đồng bộ (tải chậm).