2

在 NodeJS 之上构建 PWA。利用生产gulp工艺package/bundle。也使用jQuery.

收到错误：

未捕获的 ReferenceError：未定义 jQuery

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 方面存在问题，但我认为这不是问题所在。

4

1 回答 1

1

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

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

只需使用

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

另请阅读JavaScript 中的“使用严格”做什么

于 2018-09-26T20:10:41.630 回答