3

私の目標は、HTML ファイルに次の内容を含め、すべてが適切に機能するようにすることです。

index.html:

<script type="text/javascript" src="./vendor.js"></script>
<script type="text/javascript" src="./app.js"></script>
$(document).ready(function() {
    // jQuery should be available as `window.$`
    $(".myclass").doSomethingWithJquery(); 
}
<div class="row">
    <h1 class="col-md-3 col-md-offset-3">
        I should be able to use bootstrap, including bootstrap's javascript libraries, in my templates
    </h1>
</div>
<!-- I should be able to use app.js, with its various require('module') 
statements and attach rendered HTML to the DOM (I'm using React) -->
<div id="attach-app-js"></div>

したがって：

  1. jQuery はグローバル$変数として使用できる必要があります。
  2. それらは vendor.js の一部であるため、Bootstrap の JavaScript 関数も機能するはずです。
  3. Myも機能し、を介してグローバル スコープで既に宣言されているapp.jsような変数を再宣言しないでください。$vendor.js

以下のファイルを参照してください。現在の解決策のエラー$(".myclass").doSomethingWithJquery();インターネットがオフになっていると、次のエラーが表示されます。

Uncaught ReferenceError: $ が定義されていません

...（おそらく）snackbarjsまたは別のモジュールがjQueryをグローバルスコープにリークしていると思います。

次に、行をvendor.js次のように変更すると、次var $ = jQuery = require('jquery');のエラーが表示されます。

Uncaught ReferenceError: $ が定義されていません

しかし、今では回線で呼び出されています$(document).ready(function.....

vendor.js3 番目に、完全にコメントアウトすると、両方のエラーが発生します。

Uncaught ReferenceError: $ が定義されていません

Uncaught ReferenceError: jQuery が定義されていません

グローバルスコープで必要な場合に、必要でない場合ではなく、変数を正しくシムするようにこのフロントエンドのセットアップを取得するにはどうすればよいですか??

gulpfile.js:

.task('vendor', ['clean'], function() {
    var b = browserify(package.paths.vendor);
    var packages = getBowerPackageIds();

    packages.forEach(function (id) {
  
      var resolvedPath = bowerResolve.fastReadSync(id);
  
      b.require(resolvedPath, {
  
        // exposes the package id, so that we can require() from our code.
        // for eg:
        // require('./vendor/angular/angular.js', {expose: 'angular'}) enables require('angular');
        // for more information: https://github.com/substack/node-browserify#brequirefile-opts
        expose: id
  
      });
    });
    return b
    .bundle()
    .pipe(source(package.dest.vendor))
    .pipe(gulp.dest(package.dest.dist));
  })

.task('js', ['clean', 'install'], function() {
    var b = browserify(package.paths.app);
    // mark vendor libraries defined in bower.json as an external library,
    // so that it does not get bundled with app.js.
    // instead, we will load vendor libraries from vendor.js bundle
    getBowerPackageIds().forEach(function (lib) {
      b.external(lib);
    });
  
    var w = watchify(b, watchify.args);
    var file = package.dest.app,
        dest = package.dest.dist;
  
    w = w
      .transform(reactify)
      .transform(browserifyShim);
  
    w.on('update', rebundle);
  
    function rebundle() {
        return w.
            bundle()
            .on('error', errorHandler)
            .pipe(source(file))
            .pipe(gulp.dest(dest))
            .pipe(shell([
              'python manage.py collectstatic --noinput'
            ], {
                cwd: '../'
            }))
            // TODO: Do I need this?
            .pipe(browserSync.reload({stream: true}));
    }
    return rebundle();
  })
/**
   * Running livereload server
   */
  .task('server', ['clean', 'install', 'vendor', 'js', 'less'], function() {
    browserSync({
      proxy: "localhost:8000"
    });
  })
/**
   * Compiling resources and serving application
   */
  .task('serve', ['install', 'backup', 'clean', 'lint', 'less', 'vendor', 'js', 'server'], function() {
    return gulp.watch([
      package.paths.js,
      package.paths.app,
      package.paths.html,
      package.paths.less,
      package.paths.python
    ], [
     'lint', 'less', browserSync.reload
    ]);
  })

ベンダー.js:

$ = jQuery = require('jquery');
require('bootstrap');
require('snackbarjs');

package.json (browserify-shim構成):

  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ],  
      "exports": "bootstrap"
    },  
    "jquery-cookie": {
      "depends": [
        "jquery:jQuery"
      ]   
    },  
    "eonasdan-bootstrap-datetimepicker": {
      "depends": [
        "jquery:jQuery",
        "moment:moment",
        "bootstrap:bootstrap"
      ],  
      "exports": "$.fn.datetimepicker"
    },  
    "image-picker": {
      "depends": [
        "jquery:jQuery"
      ],  
      "exports": "$.fn.imagepicker"
    },  
    "raven-js": {
      "depends": [
        "jquery:jQuery"
      ],  
      "exports": "raven-js"
    },  
    "parsleyjs": {
      "depends": [
        "jquery:jQuery"
      ],  
      "exports": "parsleyjs"
    }   
  },  
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.js",
    "jquery-cookie": "./bower_components/jquery-cookie/jquery.cookie.js",
    "image-picker": "./bower_components/image-picker/image-picker/image-picker.js",
    "eonasdan-bootstrap-datetimepicker": "./bower_components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
    "moment": "./bower_components/moment/moment.js",
    "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.js",
    "raven-js": "./bower_components/raven-js/dist/raven.js",
    "parsleyjs": "./bower_components/parsleyjs/dist/parsley.js"
  },
4

0 に答える 0