Question

我现在已经使用Gulp一段时间了。然后我被介绍给Browserify。现在，Webpack正在我的视野中，因为我正在向React迈进。我离题了......

我想要实现这些步骤：

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

我很高兴能够在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（通用模块定义）模式。其中一种模式是始终将模块声明为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文件时速度很慢。

我可以通过Gulp + Browserify实现这一目标吗？我需要Webpack吗？

2 个答案: