3

我的目标是在我的 HTML 文件中包含以下内容并让它们都正常工作：

索引.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. Bootstrap 的 javascript 函数也应该可以工作，因为它们是 vendor.js 的一部分
  3. 我app.js也应该工作，而不是重新声明$已经在全局范围下通过vendor.js.

请参阅下面的文件。我当前的解决方案错误$(".myclass").doSomethingWithJquery();当我的互联网关闭时，我收到错误：

未捕获的 ReferenceError：$ 未定义

...这让我认为（也许）snackbarjs 或其他模块正在将 jQuery 泄漏到全局范围。

然后，当我将行更改vendor.js为：var $ = jQuery = require('jquery');我收到错误：

未捕获的 ReferenceError：$ 未定义

但现在它被在线调用$(document).ready(function.....

第三，如果我完全注释掉vendor.js，我会得到两个错误：

未捕获的 ReferenceError：$ 未定义

未捕获的 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');

包.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