Làm thế nào để bí danh một mô-đun với Browserify lib trong Gulp?

Question

Các Browserify readme mô tả tạo bên ngoài đòi hỏi như vậy: $ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

Sau đó, trong trang của bạn, bạn có thể làm:

<script src="bundle.js"></script> 
<script> 
    var through = require('through'); 
    var duplexer = require('duplexer'); 
    var myModule = require('my-module'); 
    /* ... */ 
</script> 

này hoạt động nếu bạn muốn làm sử dụng dòng lệnh, nhưng tôi muốn để sử dụng Browserify trong gulpfile. Nhưng dường như không có cách nào để thêm tên vào mô-đun như ./myfile-js:my-module trong ví dụ. Nếu có một lựa chọn cho nó, tôi đã không tìm thấy nó. Cách duy nhất để yêu cầu mô-đun của tôi theo cách mà họ mô tả là làm require(3) vì Browserify dường như cung cấp số cho các mô-đun, nhưng những con số này thay đổi và rõ ràng điều này là không mong muốn.

EDIT: giải pháp hiện tại của tôi là để làm điều này:

var shell = require('gulp-shell'); 

gulp.task('browserify', shell.task([ 
    'browserify -r ./src/bundle.js:bundle > ./build/bundle.js' 
])) 

Đây là giải pháp tối ưu và không nếu tôi muốn tận dụng tối đa các đường ống dẫn Gulp. Tôi muốn biết làm thế nào điều này có thể được thực hiện mà không có dòng lệnh hoặc, nếu không, tại sao đây chỉ là một cái gì đó có thể được thực hiện thông qua CLI?

Answer 1

b.require() với expose tùy chọn.

function bundle() { 
    browserify() 
    .require("./myfile-js", {expose: "my-module"}) 
    .require("through") 
    .require("duplexer") 
    .bundle() 
    /* ... */ 
} 

gulp.task("browserify", bundle); 

Browserify-Gulp hội nhập

Những câu trả lời khác gợi ý rằng vinyl-source-stream là một yêu cầu ở đây, nhưng đó không phải là hẳn đã đúng. Bạn chưa minh họa cách tích hợp Browserify và Gulp. Bạn chỉ cần vinyl-source-stream nếu bạn đang thực sự làm một số tích hợp giữa Browserify và Gulp ngoài việc gói một hoạt động đóng gói Browserify trong một nhiệm vụ Gulp (mà mọi người thường làm), giống như chạy một plugin Gulp trên đầu ra đi kèm. Ví dụ: bạn chỉ có thể thực hiện việc này:

var fs = require("fs"); 

gulp.task("browserify", function() { 
    return browserify(/* ... */) 
    /* ... */ 
    .bundle() 
    // But if you're doing something with Gulp here you should use 
    // `vinyl-source-stream` and pipe to `gulp.dest()`. 
    .pipe(fs.createWriteStream("./bundle.js", "utf8")); 
}); 

Answer 2

Dưới đây là một vài cách mà tôi có thể nghĩ ra để thực hiện những gì bạn đang tìm kiếm:

1. Sử dụng phương pháp .bundle():

Nó có vẻ như phương pháp .bundle() có thể là những gì bạn cần. Nó được xây dựng sẵn vào browserify. Hãy thử thử nghiệm với mã này. Nó cho phép bạn sử dụng các phương thức .pipe() của gulp.

const browserify = require('browserify') 
const gulp = require('gulp') 
const source = require('vinyl-source-stream') 

gulp.task('browserify', function (cb) { 
    browserify('./src/bundle.js') 
    .bundle() // <- This traverses the /node_modules/ tree to bundle everything ... 
      // into 1 giant stream & eventually a single file. 
    .pipe(source('bundle.js')) // Creates the "output source" file name, 
          // rather than being the "input source". 
    .pipe(gulp.dest('./build/')) 
    return cb() 
}) 

Sau đó, bạn sẽ có thể liên kết tập tin này: ./build/bundle.js để một thẻ <script> như thế này: <script src="./build/bundle.js"></script>.

NPM liên kết: vinyl-source-stream, browserify, gulp (. Bạn đã biết về những người, nhưng người khác có thể không được nhận thức của họ được nêu ra)

2. Thực hiện một bí danh sâu liên kết:

Nếu bạn muốn tạo bí danh, liên kết sâu vào lớp JS bên ngoài (không phải lớp CSS), bạn phải thử sử dụng gọi phương thức require() như sau:

const bundle = require('browserify').bundle 

Tương đương với:

import {bundle} from "browserify" 

Hai dòng cuối cùng giả định rằng một đối tượng JSON đang được trả về từ mô-đun bên ngoài, được yêu cầu/bao gồm dưới dạng phụ thuộc. Các đối tượng trở lại trong đó tập tin bên ngoài, nên tìm một cái gì đó như thế này:

module.exports = { 
    "default": SomeMainClass, 
    "bundle": someExtraFunctionLikeBundle 
} 

tiềm năng "Gotchya": Nếu phụ thuộc bên ngoài không trả về một đối tượng JSON thì .bundle sẽ quay trở lại không xác định.Ví dụ, điều này sẽ ngăn chặn sự .bundle trong require('browserify').bundle từ làm việc:

module.exports = function() {...} // instead of module.exports = {JSON} 

Xin vui lòng cho tôi biết nếu bạn cần sự giúp đỡ bổ sung với Gulp, sau khi thử nghiệm với các mã ví dụ 1. (Đó là một sự pha trộn của cách gulp.task(), browserify(), .bundle() & .pipe() làm việc cùng nhau, cùng với mã của bạn trộn vào nó. Bạn sẽ có thể để có được nó để làm việc trên máy tính của bạn.)

Answer 3

Khi sử dụng gulp với browserify, bạn cần cài đặt mô-đun vinyl-source-stream. Cờ -r hiển thị các mô-đun bên trong gói của bạn bên ngoài mà sau đó họ có thể gọi bằng cách sử dụng require.

Bạn có thể định cấu hình nhiều mục nhập và di chuyển cấu hình của mình sang một tệp khác, nếu bạn chỉ có một tệp nhập, thay vào đó bạn chỉ cần chuyển nó vào trình duyệt và xóa entries khỏi các tùy chọn. Các debug:true tùy chọn cũng giống như -d từ dòng lệnh

var b = browserify(./app/index.js');       

Bây giờ, bạn có thể làm điều này trong cấu hình ngụm của bạn:

var gulp = require('gulp');              
    var transform = require('vinyl-source-stream');         
    var browserify = require('browserify');           
    var b = browserify({                
    entries:['./app/index.js'],              
    debug:true                  
    });                    

    gulp.task('browserify',function(){            
    return b                  
      .require('through')              
      .require('duplexer')              
      .require('./app/lib/my-module',{expose:'my-module'})      
      .bundle()                
      .pipe(transform('bundle.js'))           
      .pipe(gulp.dest('./app/build'))           
}); 

Nếu bạn muốn để lộ mô-đun của bạn bằng một cái tên khác cho sử dụng với require, sử dụng tùy chọn expose.

Có vẻ như có gotcha liên quan đến việc sử dụng non Commonjs mô-đun hoặc mô-đun không được đặt đúng module.exports.

Nếu bạn muốn sử dụng các module mà bạn tiếp xúc như một requirable đây từ gói khác (giả sử bạn có nhiều bó), bạn có thể:

b 
.external('thorugh') 
.external('my-module') 
.../*more config*/ 
.bundle() 
.pipe(transform('bundle2.js')) 
.pipe(gulp.dest('./app/build') 

Trong trường hợp này bất cứ khi nào bạn cần my-module trong phạm vi bundle2, bạn đang reuiring nó bên ngoài từ require trong bundle.js.

Nếu bạn muốn cho phép nhiều tệp được yêu cầu bên ngoài gói bằng một cuộc gọi yêu cầu duy nhất, bạn có thể chuyển chúng ở dạng array.

gulp.task('browserify',function(){            
    return b                  
      .require(['through','duplexer'],{expose:'stream-utils'})                           
      .require('./app/lib/my-module',{expose:'my-module'})      
      .bundle()                
      .pipe(transform('bundle.js'))           
      .pipe(gulp.dest('./app/build'))           
}); 

Bạn có thể xem Stefan Imhoff's gulp tutorial và browserify API để biết thêm thông tin.