我可以通過Gulp + Browserify實現嗎？我需要Webpack嗎？

Question

我一直在使用Gulp一段時間。然後我被介紹給了Browserify。鑑於我正朝着React邁進，現在Webpack已經到來了。我離題...

我想實現這些步驟：

1. require前端的依賴，如jQuery和骨幹，在node應用程序，以便有真理的來源之一 - npm。
2. 將這些依賴關係（以我選擇的任何順序）連接到適合瀏覽器的dependencies.js文件（Browserify，對吧？）。
3. 串連執行的匿名函數上述文件與我自己的JavaScript文件（不論爲了我選擇）成all.min.js文件，精縮，包裹在一個自我 - (function(){ /*all code here*/})() - 以避免任何全局變量/變量窗口對象/全球污染。 （< - 這是關鍵）。

我希望能夠像我習慣的那樣，只用一口氣來處理這一切，但是整個全球性的污染事件正在殺死我。看看吞氣文件：

var gulp  = require('gulp'); 
var concat  = require('gulp-concat-util'); // Makes concat.header, concat.footer available. 
var uglify  = require('gulp-uglify'); 
var browserify = require('browserify'); 
var source  = require('vinyl-source-stream'); 
var buffer  = require('vinyl-buffer'); 

gulp.task('browserify', function() { 
    return browserify('libraries.js') // File containing a list of requires's. 
    .bundle() 
    .pipe(source('dependencies.js')) // Concatenated file. 
    .pipe(buffer()) 
    .pipe(gulp.dest('./dev/dependencies')); // Destination directory. 
}); 

gulp.task('scripts', function() { 
    return gulp.src([ 
    'dev/dependencies/dependencies.js', 
    'dev/js/models/**/*.js', // Models before views & collections. 
    'dev/js/**/!(app|templates)*.js', 
    'dev/js/templates.js', 
    'dev/js/app.js' 
    ]) 
    .pipe(concat('all.min.js')) // Final file. 
    .pipe(concat.header('(function(){')) // Attempts to wrap in a SEAF. 
    .pipe(concat.footer('\n})();')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('public')); 
}); 

所有的代碼確實會產生一個單一的文件，精縮，裹在SEAF，但我需要的庫（比如骨幹& jQuery的）仍然在全球訪問範圍。我的生活！這只是它的工作方式？這些庫都附在window（我查看了代碼），但我想也許一些Browserify魔法可以解決這個問題。任何想法都很感激！

Answer 1

很多模塊將使用UMD（通用模塊定義）模式。其中一種模式是始終將模塊聲明爲global resource，以便其他不使用模塊加載器的庫將全局可用庫。只要不碰撞，單個全球註冊的圖書館並不是非常糟糕。既然你正在將你的應用程序代碼封裝在IIFE中，並且希望不直接添加到窗口對象，那麼全局變量應該僅限於第三方庫。

Answer 2

我使用webpack來處理js和css，我對它很滿意。

所有庫依賴項都由npm install安裝並保存在package.json中。在結果中，我有一堆包含所有應用程序的縮小文件。 JS模塊存儲在函數範圍中，所以不會破壞全局範圍。易於維護，易於理解並跟蹤每個模塊中使用的所有依賴關係。

我給你一些基本的例子。

文件：webpack.config.js - 爲的WebPack

module.exports = { 

    // entrypoint for webpack to start processing 
    entry: { 
    bundle: './js/main.js' 
    }, 

    output: { 
    path: __dirname + '/' + 'assets', 
    filename: '[name].js', 
    publicPath : '/assets/', 
    } 
}; 

文件配置：./js/main.js - 入口點的的WebPack

// This is require from node_modules 
var $ = require('jquery'); 

// this is require for my local module 
var MyModule1 = require('./modules/module1.js'); 

文件：./modules/module1。JS - 本地模塊

var OtherLib = require('other-lib'); 

... 

// exporting some data for others  
module.exports = { 
    // export object 
}; 

優點：

• 一個一切工具
• 容易依賴解析和社區安裝
• 一堆插件/裝載機https://webpack.github.io/docs/list-of-loaders.html
• 容易從使用盒子

個，我面臨着缺點：

• 的WebPack是JS預處理，所以，如果你需要有處理CSS作爲單獨的文件（而不是在縮小的JS），您需要從JS結果提取CSS。所以，我正在使用ExtractTextPlugin。
• 在--watch模式下處理大量SASS文件時，速度很慢。