Các tác vụ Browserify và Babel gulp

Question

Tôi muốn sử dụng cả Browserify và Babel với JavaScript của mình. Đối với điều này tôi đã tạo một nhiệm vụ ngụm

gulp.task('babel', function() { 
    return gulp.src('_babel/*.js') 
     .pipe(browserify({ insertGlobals : true })) 
     .pipe(babel({ presets: ['es2015'] })) 
     .pipe(gulp.dest('_dev/js')); 
}); 

Thật không may, khi tôi muốn sử dụng import trong mã của tôi, tôi nhận được một lỗi:

ParseError: 'import' and 'export' may only appear at the top level 

chính tập tin js của tôi rất đơn giản:

import 'directives/toggleClass'; 

Tôi đoán rằng đó là do Babel (và nó là use strict Ngoài ra), nhưng tôi có thể làm gì?

Answer 1

Babel duy trì một biến đổi chính thức cho Browserify được gọi là babelify và nó nên được sử dụng bất cứ khi nào có thể nếu sử dụng babel và trình duyệt.

Thả việc sử dụng babel trực tiếp và đặt babelify làm plugin chuyển đổi cho trình duyệt. Có rất nhiều cách để cấu hình trình duyệt nhưng chỉ định cấu hình trong package.json của bạn có lẽ sẽ dễ dàng nhất.

nhiệm vụ ngụm của bạn sau đó sẽ được đơn giản hóa

gulp.task('babel', function() { 
    return gulp.src('_babel/*.js') 
     .pipe(browserify({ insertGlobals : true })) 
     .pipe(gulp.dest('_dev/js')); 
}); 

Browserify cũng cho thấy nhiều phương pháp để làm điều này theo chương trình, do đó bạn sẽ có thể cấu hình các bundler khỏi bên trong nhiệm vụ ngụm của bạn (thả cấu hình gói, mặc dù bằng cách sử dụng gói là hoàn toàn tốt cho điều này), kiểm tra tài liệu và thử nghiệm của họ, tôi đã thực hiện nó trước nhưng nó được một thời gian dài kể từ khi tôi sử dụng gulp (bằng cách sử dụng gulp đây chỉ là một biến chứng bạn không cần, nhưng tôi hy vọng bạn đang sử dụng nó ở nơi khác trong đường ống xây dựng của bạn, nơi nó có thể hữu ích hơn).