Làm thế nào để sử dụng cả hai 'nuốt chửng-babel' và 'ngụm-browserify'

Question

tôi cố gắng viết các mã

gulp.task('script', function() { 
    'use strict' 
    return gulp.src(['app.js', 'components/**/*.jsx']) 
    .pipe(babel()) 
    .pipe(browserify()) 
    .pipe(gulp.dest("dist")); 
}); 

nhưng nó cho thấy một số lỗi:

SyntaxError: 
/Users/Zizy/Programming/learn-react-js/components/CommentBox.jsx:58 
    <div className="commentBox"> 
    ^
ParseError: Unexpected token 
    at wrapWithPluginError (/Users/Zizy/Programming/learn-react-js/node_modules/gulp-browserify/index.js:44:10) 

Dường như trước .pipe(browserify()) sự gulp did't chuyển đổi mã jsx. Nhưng nếu tôi chỉ xóa .pipe(browserify()) Tôi thấy điều đó đã biến đổi, chỉ không thể để babel và trình duyệt hoạt động cùng nhau.

Tôi biết có thể tôi có thể sử dụng như babelify hoặc browserify plugin for babel mặc dù, tôi chỉ muốn tìm ra lý do.

Answer 1

ngụm-browserify doesn' t khá làm việc như thế. Bạn không cung cấp cho nó một loạt các bộ đệm để thu thập và đóng gói.

Bạn cung cấp cho nó một tệp — tệp mục nhập — được chuyển vào Browserify. Trình duyệt kiểm tra để xem những gì khác tệp tham chiếu tệp nhập, sau đó tải các tệp đó trực tiếp từ hệ thống tệp, có nghĩa là bạn không thể sửa đổi chúng bằng các plugin gulp trước.

Vì vậy, thực sự, nếu chúng ta giả vờ bạn không muốn sử dụng Babel trên các tập tin nguồn của bạn, gulpfile của bạn sẽ giống như thế này, chỉ đi qua trong file nhập:

gulp.task('script', function() { 
    'use strict' 
    return gulp.src('app.js') 
    .pipe(browserify()) 
    .pipe(gulp.dest("dist")); 
}); 

Tuy nhiên, lưu ý rằng ngụm -browserify không còn được duy trì nữa, và đây chính là lý do tại sao. Plugin gulp không được phép đọc trực tiếp từ hệ thống tệp. Đó là lý do tại sao bạn phải sử dụng Browserify (hoặc, trong trường hợp của bạn, Babelify) trực tiếp với mã nguồn vinyl as recommended in the gulp recipes. Nó thành ngữ hơn và ít khó hiểu hơn.

Điều đó kết thúc câu trả lời của tôi cho câu hỏi của bạn, nhưng tôi muốn thêm: nếu bạn đang sử dụng cú pháp mô-đun ES2015 (và có thể bạn nên), có cách tốt hơn để thực hiện việc này. Browserify kết thúc tốt đẹp tất cả các mô-đun của bạn một cách riêng biệt trong một loạt các mã để làm cho API CommonJS có lập trình hoạt động đúng cách, nhưng các mô-đun ES2015 có một cú pháp khai báo, giúp dễ dàng hơn cho các công cụ hoạt động trên chúng một cách tĩnh lặng. Có một công cụ được gọi là Rollup tận dụng lợi thế này, cho phép nó tạo ra các gói nhỏ hơn, nhanh hơn và thân thiện với môi trường hơn so với Browserify.

Đây là cách bạn có thể sử dụng nó với ngụm:

var gulp = require('gulp'), 
    rollup = require('rollup-stream'), 
    babel = require('gulp-babel'), 
    source = require('vinyl-source-stream'), 
    buffer = require('vinyl-buffer'); 

gulp.task('script', function() { 
    return rollup({entry: 'app.js'}) 
    .pipe(source('app.js')) 
    .pipe(buffer()) 
    .pipe(babel()) 
    .pipe(gulp.dest('dist')); 
}); 

Answer 2

Bắt đầu từ Babel 6 bạn cần khai báo các giá trị đặt trước theo cách thủ công, hãy kiểm tra this.

Về cơ bản, trong thư mục gốc của dự án của bạn, bạn cần một .babelrc với nội dung sau:

{ 
    "presets": [ "es2015", "react" ] 
} 

Và các module NPM tương ứng trong package.json:

// package.json 

{ 
    "devDependencies": { 
    ... 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    ... 
    } 
}