如何使用 Gulp 在 Node 中要求 jQuery？

Question

在 NodeJS 之上构建 PWA。利用 gulp 处理 package/bundle 进行生产。还使用 jQuery.

收到错误：

Uncaught ReferenceError: jQuery is not defined

package.json:

"devDependencies": {
  "browserify": "^16.2.2",
  "gulp": "^3.9.1",
  "gulp-browserify": "^0.5.1",
  "gulp-clean-css": "^3.10.0",
  "gulp-concat-css": "^3.1.0",
  "gulp-if": "^2.0.2",
  "gulp-sourcemaps": "^2.6.4",
  "gulp-uglify": "^3.0.1",
  "gulp-webserver": "^0.9.1",
  "jquery": "^3.3.1",
  "sw-precache": "^5.2.1"
}

Gulp任务是：

gulp.task('js', function () {
return gulp.src(src + '/js/app.js')
    .pipe(browserify())
    .pipe(gulpif(environment === 'production', uglify()))
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(gulp.dest(dest + '/js'));
});

app.js 是：

(function () {
  'use strict';
  var $ = jQuery = require('jquery');
  require('./bootstrap-3.3.7.min.js');
  $('.loader').fadeOut(1000);

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
    .register('./service-worker.js')
    .then(function (registration) 
      console.log('Service Worker Active', registration.scope);
    })
    .catch(function (err) {
      console.log('Service worker registration failed : ', err);
    });
  }
})(); // Page Ready

如果我对 Node 的理解是正确的，jQuery 在使用 $ 之前从 require 调用中包含。所以我很困惑为什么会收到错误消息。

请注意，虽然其他帖子对 Browserify 和 jQUery 存在问题，但我认为这不是问题所在。

Answer 1

您正在使用 use strict，它可以防止任何错误创建全局变量。

因此，当 var $ = jQuery = require('jquery'); 作为意外变量出现问题时，不存在的 jQuery 被创建为全局变量并分配给 $。 use strict 阻止了这个。

只需使用

'use strict';
 var $ = require('jquery');

同时阅读 What does 'use strict' do in JavaScript

如何使用 Gulp 在 Node 中要求 jQuery？

How to require jQuery in Node using Gulp?

javascript

jquery

use-strict

node.js

ecmascript-6