繁体   English   中英

Gulp和browserify给出错误:无法从'C:...'找到模块'jquery'

[英]Gulp and browserify give error: Cannot find module 'jquery' from 'C:…'

我收到的错误是:

错误:找不到'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 at FSReqWrap.oncomplete(fs.js:153:21 )

我的目录结构如下:

newstyle /资产/ NPM / index.js
newstyle /资产/ NPM /的package.json
newstyle /资产/ NPM / gulpfile.js

newstyle /资产/ lib中/帮手/ 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://git@github.com/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:

+ gulp@4.0.2
updated 6 packages in 19.938s

解决方案相当简单,但不容易得出导致错误的结论,您必须将node_modules添加到gulpfile.js中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
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM