如何在Gulp中使用Browserify lib進行模塊別名？

Question

的Browserify自述介紹創建外部要求，像這樣： $ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

然後在你的頁面，你可以這樣做：

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

，如果你想要做的使用命令行這工作，但我想在gulpfile中使用Browserify。但在示例中似乎沒有辦法爲./myfile-js:my-module等模塊添加名稱。如果有選擇它，我還沒有找到它。以他們描述的方式要求我的模塊的唯一方法是做require(3)，因爲Browserify似乎給模塊提供了數字，但這些數字發生了變化，顯然這不是可取的。

編輯：我目前的解決方案是這樣：

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

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

這是一個解決辦法，如果我想利用咕嘟咕嘟管道充分利用不是最優的。我想知道如何在沒有命令行的情況下做到這一點，或者如果沒有，爲什麼這隻能通過CLI完成？

Answer 1

b.require()與expose選項。

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

gulp.task("browserify", bundle); 

Browserify，咕嘟咕嘟整合

其他的答案表明，vinyl-source-stream是這裏的要求，但是這未必是真實的。你沒有說明你如何整合Browserify和Gulp。只需要vinyl-source-stream，如果您實際上在Browserify和Gulp之間進行了一些整合，而不僅僅是在Gulp任務（人們通常會這麼做）中包裝Browserify捆綁操作，就像在捆綁輸出中運行Gulp插件一樣。例如，你可以這樣做：

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

這裏有一對夫婦，我能想到的方式來完成你在找什麼：

1.使用.bundle（）方法：

這似乎是.bundle()方法可能是你需要的。它預先建成browserify。嘗試使用此代碼進行試驗。它允許你使用gulp的.pipe()方法。

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() 
}) 

那麼你應該能夠將此文件鏈接：./build/bundle.js到<script>標籤是這樣的：<script src="./build/bundle.js"></script>。

NPM鏈接：vinyl-source-stream，browserify，gulp（你已經知道了這些，但其他人可能不知道他們的又）

2.深聯別名：

如果您想要創建一個別名，將其鏈接到外部JS類（不是CSS類），您必須嘗試使用​​require（）方法調用，如下所示：

const bundle = require('browserify').bundle 

即相當於：

import {bundle} from "browserify" 

這些最後兩行假定JSON對象正在從外部模塊，其被要求/包含作爲依賴返回。在外部文件返回的對象，應該是這個樣子：

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

潛在「Gotchya」：如果外部的依賴性不返回JSON對象，那麼.bundle將返回undefined。例如，這將防止require('browserify').bundle的.bundle從工作：

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

請讓我知道如果你需要咕嘟咕嘟額外的幫助，與第一次的代碼示例嘗試之後。 （這是如何gulp.task()，browserify()，.bundle() & .pipe()一起工作，與您的代碼混合到它一起。你應該能夠得到它到你的計算機上工作的融合。）

Answer 3

當使用一飲而盡與browserify，您需要安裝vinyl-source-stream模塊。 -r標誌會在外部公開您的包中的模塊，然後可以使用require來調用它們。

您可以配置多個條目並將您的配置移動到不同的文件，如果您只有一個條目文件，您可以將它傳遞給browserify並從選項中刪除entries。該debug:true選項 相同-d命令行

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

現在，你可以在你大口的配置做到這一點：

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'))           
}); 

如果要通過不同的名稱，以使您的模塊與require一起使用，請使用expose選項。

看起來好像有一個gotcha關於使用non Commonjs模塊或模塊，不正確設置module.exports。

如果你想使用你公開爲requirable這裏從其他包模塊（假設你有多個包），你可以：

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

在這種情況下，只要您需要my-module在bundle2之內，您正在從bundle.js的require外部重新獲得它。

如果您希望允許多個文件在單個需求調用的捆綁外部需要，您可以將它們作爲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'))           
}); 

你可以看一下Stefan Imhoff's gulp tutorial和browserify API以獲取更多信息。