如何使用gulp来构建JavaScript包？ [英] How to use gulp to build JavaScript bundles?

问题描述

我想使用 g 来构建捆绑的JavaScript文件。

例如，我在我的项目中有以下结构：

1. /vendor/vendor1/vendor1.js


2. /vendor/vendor2/vendor2.js


3. /js/includes/include1.js


4. / js / includes / include2 .js


5. /js/bundle1.js


6. /js/bundle2.js

供应商包括（1-2），本地包含（3-4）和捆绑文件（5-6）。

供应商包括仅与第三方JavaScript库一起安装的凉亭或作曲家。他们可以是CommonJS ， AMD 或者只是一个普通的jQuery插件。

我想指定里面的依赖关系这样的包文件：

/js/bundle1.js

 <$ c $ （'vendor2'）; 
 
包含（'vendor1'）; 
 include（'vendor2'）; 
 
 //供应商包括。 //本地包含
 include（'includes / include1.js'）; 
 include（'includes / include2.js'）; 
 
 //这里有一些代码
 
}）（）; 
  

我想 gulp 来处理这个源文件并创建一个最终的分发文件（bundle），确保所有的依赖关系（包括）在一个文件中合并在一起。因此，我可以在我的HTML中包含 foo.js ，并且所有依赖项都可以使用。

我想要一个清晰且强大的系统以管理项目内的所有依赖关系并构建分发文件。

• 如何实现这一目标？


• 我应该为自己的脚本使用什么格式（AMD，CommonJS和其他）？


• 如何在我的源包文件中指定依赖项？


• 如何构建发行版？ 答案，但没有。你试图解决的问题是许多人已经以许多不同的方式解决的问题，并且你已经确定了两个主要选项：AMD和CommonJS。还有其他的方法，但鉴于你可能对Javascript依赖管理和吞咽新手不熟悉，我建议使用相对简单的东西（尽管这个主题本质上不是直接的）。
  
  
  

  我认为最简单的路线可能是：
  $ b

  
  
  • 使用CommonJS表示依赖关系
  $在browserify中，b $ b
  • 使用browserify将它们解析为捆绑包
  
  
  • ，使用UMD方法，以便获得适用于使用AMD或CommonJS或不使用这两个依赖管理系统中的任何一个
  
  
  
  
  

  运行browserify的语句可能如下所示： p>
  
  

    var browserify = require（'gulp-browserify'）; 
   gulp.src（'bundles / bundle1.js'，{read：false}）
   .pipe（browserify（{
  'standalone'：true 
  }）
  .pipe（'bundle1Output.js'））
   .pipe（gulp.dest（'dist'））; 
    

  这应该会给你一个dist / bundle1Output.js文件。

  
  

  I want to use gulp to build bundles of JavaScript files.

  For example I have the following structure in my project:

  1. /vendor/vendor1/vendor1.js
  2. /vendor/vendor2/vendor2.js
  3. /js/includes/include1.js
  4. /js/includes/include2.js
  5. /js/bundle1.js
  6. /js/bundle2.js

  There are vendor includes (1-2), local includes (3-4), and bundle files (5-6).

  Vendor includes are just third-party JavaScript libraries installed with bower or composer. They can be CommonJS, AMD or just a plain-old jQuery plugins.

  I want to specify dependencies inside of a bundle files like this:

  /js/bundle1.js

  (function() {
  
      // Vendor includes.
      include('vendor1');
      include('vendor2');
  
      // Local includes.
      include('includes/include1.js');
      include('includes/include2.js');
  
      // Some code here.
  
  })();
  

  I want gulp to process this source file and create a final distribution file (bundle) ensuring that all dependencies (includes) are merged together in a single file. So I can include foo.js from my HTML and all dependencies will be available to it.

  I want to have a clear and robust system to manage all dependencies inside of a project and build distribution files.

  • How can I achieve this?
  • What format should I use for my own scripts (AMD, CommonJS, other)?
  • How do I specify dependencies in my source bundle files?
  • How do I build distribution?

  解决方案

  Your question is posed as if there's a single answer, but there isn't. The problem you're trying to solve is one that many people have solved in many different ways, and you've identified two of the major options: AMD and CommonJS. There are other ways, but given that you might be new to Javascript dependency management as well as gulp, I'd recommend going with something that's relatively straightforward (even though this subject is inherently not straightforward).

  I think the easiest route for you might be:

  • use CommonJS to express the dependencies
  • use browserify to resolve them into bundles
  • in browserify, use the "UMD" method so that you get a single bundle that will work for apps that use either AMD or CommonJS or are not using either of these dependency management systems

  The statement in gulp to run browserify as such might look something like:

  var browserify = require('gulp-browserify');
  gulp.src('bundles/bundle1.js', {read: false})
    .pipe(browserify({
      'standalone': true
    })
    .pipe(rename('bundle1Output.js'))
    .pipe(gulp.dest('dist'));
  

  That should give you a dist/bundle1Output.js file.

  这篇关于如何使用gulp来构建JavaScript包？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！