3

bootstrap.js と jquery.js (両方とも npm でインストール) を vendors.js ファイルに結合したいのですが、呼び出して jquery を使用できるようにしたいですrequire('$')。そこで、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'} }
};

しかし、タスクを実行した後、ブートストラップがjqueryの前にあるファイルを受け取るため、スローされますUncaught Error: Bootstrap's JavaScript requires jQuery

追加した

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

package.jsonに追加しましたが、役に立ちませんでした。私には、 browserify がこの変換を適用しないように思え.transform(browserifyShim)ます.transform(function() { throw new Error("OLOLO"); })。

4

3 に答える 3

5

browserify と shims を間違った方法で使用しました。

Fist.transform(browserifyShim)は必要ありません。コードから変換を呼び出すには、これは間違った構文です。

第二に、変換は正常に機能しています。必要なのは、vendors.jsファイルを作成し、その中にrequire('bootstrap'). 次に、 vendors.js をbulld-frontend:vendorsタスクのエントリ ポイントとして指定します。

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

そしてそれは働いています。

于 2014-10-27T22:37:38.700 に答える
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;
}
于 2014-11-11T13:25:43.230 に答える
0

トリンが投稿したものを試しました。しかし、運がありません。jQueryが未定義であることにまだ不満があります。

ちょっとだけ暴言。モジュラーrequireを行うことについてのこの熱狂はすべて、ツールは混乱を招き、たとえば、1歩進んでから3歩後退します。スクリプト タグを再びハードコーディングすることになったのでしょうか。

OK、十分な怒鳴り声。これは、jQuery と任意の jQuery プラグインを機能させる方法です。

最初のこと - jQuery および関連するプラグインは、1 つのことだけを必要としました - $ / jQuery で、すべてが機能します。では、わざわざ require('jquery') と require('bootstrap') を使用する必要があるのはなぜですか (さらに必要な場合は、js と package.json でそれらすべてをハードコーディングします - 面白そうです?!?)

私はbowerと古き良きwiredepを再利用しています。

私のHTML：

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

OK、これは古典的な有線接続のセットアップです。bower.json を監視するには、gulp ファイルを取得するだけです。そして、bower を介して 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" または "global:$" です

次に、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 では) ディレクティブ内からのみ $ を呼び出す必要があります (コンポーネント内でさえも)。

この助けを願っています。

PS これは間もなく、yeoman ジェネレーター (generator-ngf2) にパッケージ化されます。詳細については、私のウェブサイトhttp://panesjs.comを確認してください。

于 2016-03-09T13:29:46.547 に答える