Gulp 和 browserify 给出错误：Cannot find module 'jquery' from 'C:....'

Posted 2023-03-07

【中文标题】Gulp 和 browserify 给出错误：Cannot find module \'jquery\' from \'C:....\'

【英文标题】：Gulp and browserify give error: Cannot find module 'jquery' from 'C:....'Gulp 和 browserify 给出错误：Cannot find module 'jquery' from 'C:....'

【发布时间】：2019-10-08 16:36:47

【问题描述】：

我收到的错误是：

错误：无法从“F:...\newstyle\assets\lib\helper\html\img\js”中找到模块“jquery” 在 C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17 在进程中 (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43) 在 ondir (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17) 加载时 (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43) 在 onex (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31) 在 C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47 在 FSReqWrap.oncomplete (fs.js:153:21)

我的目录结构如下：

newstyle/assets/npm/index.js newstyle/assets/npm/package.json newstyle/assets/npm/gulpfile.js

newstyle/assets/lib/helper/html/img/js/img.module.js

我的 package.json 看起来像这样：

  "name": "newstyle",
  "version": "1.0.0",
  "description": "styles and libraries",
  "main": "index.js",
  "dependencies": 
    "@tschallacka/assetmanager": "^1.0.0",
    "@tschallacka/jquery.oc.foundation": "^1.0.2",
    "@tschallacka/jquery.render": "^1.0.0",
    "@tschallacka/jquery.request": "^1.0.0",
    "@tschallacka/oc.foundation.base": "^1.0.1",
    "@tschallacka/oc.foundation.controlutils": "^1.0.1",
    "@tschallacka/oc.foundation.request": "^1.0.0",
    "animate.css": "^3.7.0",
    "bootstrap-less": "^3.3.8",
    "flexslider": "^2.7.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "jquery-touchswipe": "^1.6.19",
    "jquery.easing": "^1.4.1",
    "lazysizes": "^4.1.8",
    "liquidslider": "git+https://[e-mail]/KevinBatdorf/liquidslider.git",
    "popper.js": "^1.15.0",
    "sweetalert2": "^8.11.1"
  ,
  "devDependencies": ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "author": "",
  "license": "ISC"

我的 index.js 是这样的：

require('@tschallacka/oc.foundation.base');
require('@tschallacka/oc.foundation.controlutils');
// ====================== TROUBLE CAUSING LINE!! ==========================
require('../assets/lib/helper/html/img/js/img.module.js');

newstyle/assets/lib/helper/html/img/js/img.module.js 中的代码

var $ = require('jquery');
var Base = require('@tschallacka/oc.foundation.base');
var controlUtils = require('@tschallacka/oc.foundation.controlutils');

我的 gulpfile.js

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var log = require('gulplog');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('javascript', function () 
  // set up the browserify instance on a task basis
  var b = browserify(
    entries: './index.js', // Source name
    debug: true
  );

  return b.bundle()
    .pipe(source('closure.js'))// Resulting filename
    .pipe(buffer())
    .pipe(sourcemaps.init(loadMaps: true))
        // Add transformation tasks to the pipeline here.
        .pipe(uglify())
        .on('error', log.error)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('../js/'));
);

gulp.task('watch', function () 
  gulp.watch('./*.less', ['less']);
);

gulp.task('less', function () 

  return gulp.src('./style.less')
    .pipe(less(
         relativeUrls: true
    ).on('error', function (err) 
      console.log(err);
    ))
    .pipe(cssmin().on('error', function(err) 
      console.log(err);
    ))
    .pipe(rename('closure.css'))
    .pipe(gulp.dest('../css/'));

);

当我运行它而没有出现问题时，一切正常，它找到了模块并顺利编译。找不到模块没有问题。

但是当我需要该脚本时，突然无法再找到我需要从“父”脚本中作为测试的模块，即使它仍应按字符串名称在缓存中。

如果我按文件名“要求”文件，它确实有效，但这不太理想，因为我经常需要检查目录嵌套。

这是什么原因造成的，我该如何解决？

我尝试过的事情：

设置基础

var b = browserify(
    entries: './index.js', // Source name
    debug: true,
    basedir: __dirname
  );

npm 从 6.4.1 更新到 6.9.0

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade

更新的吞咽：

+ gulp@4.0.2
updated 6 packages in 19.938s

【参考方案1】：

解决方案相当简单，但不容易得出导致错误的结论，您必须在 gulpfile.js 中将 node_modules 添加到 browserify 的 'paths' 变量中

// set up the browserify instance on a task basis
var b = browserify(
  entries: './index.js', // Source name
  debug: true,
  paths: ['./node_modules'] // <--- this line here
);