Question

我想结合bootstrap.js＆amp; jquery.js（都是用npm安装）到vendors.js文件中，但仍然可以通过调用require('$')来使用jquery。所以我创建了gulp任务：

'use strict';

var gulp = require('gulp'), 
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');

gulp.task('bulld-frontend:vendors', function(done) {
 var build = browserify({
  entries: [
  'jquery',
  'bootstrap'
  ]
});

 build
 .transform(browserifyShim)
 .require('jquery')
 .bundle()
 .pipe(source('vendors.js'))
 .pipe(gulp.dest('build/public/js'))
 .pipe(plumber({
  errorHandler: helpers.logError
}));

 done();
});

然后将配置添加到 package.json

"browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": "./gulp/utilities/shim-config.js",
},

最后在 gulp / utilities / shim-config.js

中配置我的垫片

'use strict';

module.exports = {
  'jquery'    :  '$',
  'bootstrap' :  { 'depends': { 'jquery': 'jQuery'} }
};

但在运行任务后我收到文件，其中bootstrap在jquery之前，所以它抛出Uncaught Error: Bootstrap's JavaScript requires jQuery

我添加了

"browserify": {
    "transform": [
        "browserify-shim"
    ]
}

到 package.json ，但它没有帮助。在我看来，浏览器从不应用此转换，因为如果我用.transform(browserifyShim)替换.transform(function() { throw new Error("OLOLO"); })任务仍然有效。

Answer 1

我使用了browserify并以错误的方式填充。

Fist，.transform(browserifyShim)不需要，这是从代码调用转换的错误语法。

其次，转换工作正常，我只需要创建 vendors.js 文件，并在require('bootstrap')中使用bootstrap。然后将vendors.js指定为 bulld-frontend：vendor 任务的入口点：

var build = browserify({
  basedir: 'sources/client/js'
  entries: [
  './vendors.js'
  ]
});

它正在发挥作用。

Answer 2

这对我有用，使用browserify-shim并在package.json文件中说明所有供应商库以及“browserify-shim”字段中的所有依赖项和导出。

"browser": {
    "modernizr": "./app/assets/javascripts/vendor/modernizr.js",
    "jquery": "./bower_components/jquery/jquery.js",

    "angular": "./bower_components/angular/angular.min.js",
    "angular-touch": "./bower_components/angular-touch/angular-touch.js",
},
"browserify-shim": {
    "modernizr": {
      "exports": "Modernizr"
    },
    "jquery": "$",
    "angular": {
      "depends": "jquery", 
      "exports": "angular"
    },
    "angular-touch": {
      "depends": "angular",
      "exports": "angular.module('ngTouch')"
    }
}

然后在我的gulpfile.js上，我有以下函数来生成供应商包。

// function to fetch the 'browserify-shim' json field from the package.json file
function getNPMPackageBrowser() {
  // read package.json and get dependencies' package ids
  var packageManifest = {};
  try {
    packageManifest = require('./package.json');
  } catch (e) {
    // does not have a package.json manifest
  }
  return packageManifest['browserify-shim'] || {};
}

function vendor() {
  var deferred = q.defer(),
    b = browserify({ debug: true }).transform('browserify-shim'),
    libs = getNPMPackageBrowser(),
    lib;

  plugins.util.log('Rebuilding vendor JS bundle');

  // recursively add all of the vendor libraries as a --require or bundle.require() to browserify
  for (lib in libs) {
    if (libs.hasOwnProperty(lib)) {
      b.require(lib);
    }
  }

  b.bundle()
    //Pass desired output filename to vinyl-source-stream
    .pipe(source('vendor.js'))
    .pipe(gulp.dest(publicDir + '/assets/javascripts'))
    .on('end', deferred.resolve)
    .on('error', handleError);

  return deferred.promise;
}

Answer 3

尝试过Torin发布的内容。但没有运气。还是抱怨jQuery未定义。

只是有点咆哮。所有这些都是关于模块化需求的热潮，但工具很混乱，比如说，向前迈出一步，然后向后退一步。我们最终再次进行硬编码脚本标记？

好的，足够的咆哮。这就是我如何使jQuery和任何jQuery插件工作。

第一件事 - jQuery和任何相关的插件只需要一件事 - $ / jQuery然后一切都会工作。那么为什么还要求（＆＃39; jquery＆＃39;）并要求（＆＃39; bootstrap＆＃39;）（如果你需要更多，你需要在你的js和你的js中对它们中的每一个进行硬编码package.json - 听起来很有趣？！？）

我只是重新使用凉亭和旧的铁丝。

我的HTML：

<head>
     <!-- bower:css -->
     <!-- endinject -->
     <!-- inject:css -->
     <!-- endinject -->
</head>
<body>
     <app></app>
     <!-- bower:js -->
     <!-- endinject -->
     <script src="bundle.js"></script>

好的，这是经典的wiredep设置。你只需要获取gulp文件来观看bower.json。每当你通过凉亭添加任何deps。这将接通电线并提供服务。

bundle.js文件是从gulpfile.js

中生成的

 gulp.task('bundle' , ['wiredep'] , function() 
 {
     browserify({debug: true})
               .transform(
                    babelify.configure({stage: 0})
               )
               .transform(
                    stringify(['html'])
               )
               .require(
                    './app/index.js', {entry: true}
               )
               .bundle()
               .on('error' , errorHandler)
               .pipe(source('bundle.js')) // vinyl-source-stream
               .pipe(buffer()) // vinyl-buffer
               .pipe(sourcemaps.init({loadMaps: true})
               .pipe(sourcemaps.write('./'))
               .on('error' , errorHandler)
               .pipe(gulp.dest('./dev'));

 });

现在我的包json

 "browser": {
     "jquery": "./bower_components/jquery/dist/jquery.min.js",
     "bootstrap": "./bower_components/bootstrap/dist/jst/bootstrap.min.js",
     "mdbootstrap":"./bower_components/mdbootstrap/js/mdb.min.js"
 },
 "browserify": {
     "transform": ["browserfiy-shim"]
 },
 "browserify-shim": {
      "jquery": "global:$"
 }

最后一部分是关键的`global：jQuery＆＃34;或者＆＃34;全球：$＆＃34;

然后在你的js文件中（我使用Angular和ng-forward）

 'use strict';
 import 'bableify/polyfill';
 import 'reflect-metadata';
 import 'angular';
 import 'angular-ui-router';
 import {bootstrap} from 'ng-forward';
 import {App} from './components/app/app'; 
 import config from './config/config';

 // try to test if we get the bootstrap
 console.log($.fn.modal);

 bootstrap(App , ['ui.router',config.name]);

您应该会看到控制台将显示引导模式代码。

当然，（在Angular中）你应该只在你的指令中调用$（甚至不在组件中）。

希望这有帮助。

P.S。这将很快打包成一个yeoman发电机（generator-ngf2）。查看我的网站http://panesjs.com了解更多信息。

Browserify-shim不解析依赖项

3 个答案: