我可以实现这与Gulp + Browserify?我需要Webpack吗?

Question

我使用Gulp已经有一段时间了。然后我被介绍给Browserify。现在Webpack出现在我的视野中，因为我正在转向React。我跑题了…

我想实现以下步骤:

1. require前端依赖，如jQuery和Backbone，在node应用程序中，以便有一个真相来源- npm。
2. 将这些依赖项(以我选择的任何顺序)连接到适合浏览器的dependencies.js文件中(Browserify，对吧?)
3. 将上述文件与我自己的JavaScript文件(以我选择的任何顺序)连接到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 &仍然可以在全局范围内访问。我的生活!这就是它的运作方式吗?这些库是附加自己到window(我看在代码)，但我认为也许一些Browserify魔术可以处理。任何想法都很感激!

Answer 1

许多模块将使用UMD(通用模块定义)模式。其中一种模式是始终将模块声明为全局资源，以便其他不使用模块加载器的库将具有全局可用的库。只要不发生冲突，在全球范围内注册单个库并不是非常糟糕。因为你是在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文件时相当慢。