javascript - Gulp 和 browserify 给出错误:Cannot find module 'jquery' from 'C:....'
问题描述
我收到的错误是:
错误:在 C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules的“F:...\newstyle\assets\lib\helper\html\img\js”中找不到模块“jquery” \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.jsnewstyle/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://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@4.0.2
updated 6 packages in 19.938s
解决方案
解决方案相当简单,但不容易得出导致错误的结论,您必须在 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
});
推荐阅读
- node.js - 使用 ioRedis 连接到 ElastiCache 时出现随机 SSL 握手错误
- swift - Swift Core Data 保存到 /dev/null 所以它只在内存中
- kubernetes - 通过切换到新池来升级GKE集群:集群间服务通信会失败吗?
- java - java Flux中按对象属性分组
- azure - 如何在 Azure DevOps Pipeline 中设置和读取用户环境变量?
- php - PHP合并具有相同键/值的数组
- django - 在 Django 动态 REST 中过滤
- r - 按 R 中的分组行折叠/组合日期范围
- visual-studio - 创建新项目 Visual Studio 2015 和 PGI Visual Fortran
- mysql - 在 MAC 上安装 MySQL