我可以用Gulp + Browserify实现吗？ 我需要Webpack吗？

Question

我已经使用Gulp一段时间了。 然后我被介绍给Browserify。 现在，考虑到我正在向React迈进，Webpack即将出现。 我离题了...

我想完成以下步骤：

1. 在node应用程序中require前端依赖项（例如jQuery和Backbone），以便拥有真实的来源npm 。
2. 将这些依赖项（以我选择的任何顺序）连接到适合浏览器的dependencies.js文件中（Browserify，对吗？）。
3. 将上面的文件与我自己的JavaScript文件（以我选择的任何顺序）连接成一个all.min.js文件，该文件all.min.js压缩， 包装在一个自执行的匿名函数中 - (function(){ /*all code here*/})() -以避免任何全局变量/窗口对象上的变量/全局污染 。 （<-这是关键）。

我很希望能够像我习惯的那样在Gulp中处理所有这些问题，但是整个全球污染问题正在使我丧命。 看一下gulp文件：

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中，但是我所需的库（例如Backbone和jQuery）仍然可以在全局范围内访问。 我的生活！ 这就是它的工作方式吗？ 这些库将自己附加到window （我在代码中进行了查看），但我认为也许有些Browserify魔术可以解决这一问题。 任何想法表示赞赏！

Answer 1

许多模块将使用UMD （通用模块定义）模式。 模式之一是始终将模块声明为全局资源，以便其他不使用模块加载器的库将具有全局可用的库。 只要它们不冲突，就可以在全球范围内注册单个库，这并不是一件坏事。 由于您将应用程序代码包装在IIFE中，并希望不直接添加到window对象，因此全局变量应仅限于第三方库。

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文件时，速度相当慢。