Browserify 找不到孩子所需的依赖项

Question

我有一个带有简单 index.js 的存储库：

(function() {
   "use strict";

   var angular = require('angular');
})();

我使用 gulp 进行捆绑（编辑下方的完整文件）：

gulp.task('browserify', function() {
    return browserify({
        entries: './dist/childRepository.js',
        insertGlobals : true
    })
    .transform(to5ify)
    .bundle()
    .on('error', errorWarning)
    .pipe(source('childRepository.bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist'))
});

这会以正确的顺序创建我的捆绑文件，并在浏览器中运行良好。现在在另一个存储库中，我使用 npm 创建了第一个依赖项。

npm install childRepository.git --save

在第二个存储库中，我创建了另一个 index.js：

(function() {
    "use strict";

    var angular = require('angular');

    var childRepository = require('childrepository');
})();

我有一个类似的用于 browserify 和捆绑的 gulpfile，但是它失败并出现错误：

events.js:160
  throw er; // Unhandled 'error' event
  ^

Error: Cannot find module './angular' from '/Users/jrquick/uabshp/childRepository/dist'
    at /Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/jrquick/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)

我尝试了几种设置，添加源映射，翻转标志，但无法解决此错误。有人有建议吗？谢谢。

编辑，我的 package.json 用于 childRepository：

    {
  "name": "childRepository",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/childRepository.bundle.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@bitbucket.org/uabshp/childRepository.git"
  },
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/uabshp/childRepository#readme",
  "devDependencies": {
    "6to5ify": "^4.1.1",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-jshint": "^2.0.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.4",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "angular": "^1.6.0"
  }
}

paren 存储库的 package.json：

    {
  "name": "parentrepository",
  "version": "1.0.0",
  "description": "### How do I get set up? ###",
  "main": "./dist/parentRepository.bundle.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@bitbucket.org/uabshp/parentRepository.git"
  },
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/uabshp/parentRepository#readme",
  "devDependencies": {
    "6to5ify": "^4.1.1",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-jshint": "^2.0.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.4",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "angular": "^1.6.4",
    "childRepository": "git+ssh://git@bitbucket.org/uabshp/childRepository.git"
  }
}

gulpfile.js（除了名字之外都一样）：

var gulp = require('gulp');

var concat = require('gulp-concat');
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var jshint = require('gulp-jshint');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var source = require('vinyl-source-stream');
var sourcemaps = require('gulp-sourcemaps');
var to5ify = require('6to5ify');
var uglify = require('gulp-uglify');

gulp.task('sass', function() {
    return gulp.src('sass/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

gulp.task('lint', function() {
    return gulp.src('src/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('scripts', function() {
    return gulp.src('src/*.js')
        .pipe(concat('childRepository.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('childRepository.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('browserify', function() {
    return browserify({
            entries:       './dist/childRepository.js',
            insertGlobals: true,
            standAlone:    true
        })
        .transform(to5ify)
        .bundle()
        .on('error', errorWarning)
        .pipe(source('childRepository.bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'))
});

gulp.task('watch', function() {
    gulp.watch('src/*.js', ['build']);
    gulp.watch('dist/childRepository.js', ['browserify']);
    gulp.watch('sass/*.sass', ['sass']);
});

gulp.task('build', [
    'sass',
    'lint',
    'scripts',
    'browserify'
]);

gulp.task('default', [
    'build',
    'watch'
]);

function errorWarning(error) {
    console.log(error.toString());
    this.emit('end');
}

Answer 1

我通过 install derequire 解决了这个问题：npm install gulp-derequire --save-dev

然后添加到我的 gulpfile.js 中：

gulp.task('browserify', function() {
    return browserify('./dist/uabError.js')
       .transform(to5ify)
       .bundle()
       .on('error', errorWarning)
       .pipe(source('uabError.bundle.js'))
       .pipe(derequire())
       .pipe(buffer())
       .pipe(sourcemaps.init({loadMaps: true}))
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest('dist'))
});

这确实会导致我收到关于尝试多次加载 Angular 的警告的问题。我还有另一个不需要取消要求的解决方法。只需将 ignoreMissing 设置为 true。

gulp.task('browserify', function() {
    return browserify('./dist/uabError.js', { ignoreMissing: true })
       .transform(to5ify)
       .bundle()
       .on('error', errorWarning)
       .pipe(source('uabError.bundle.js'))
       .pipe(buffer())
       .pipe(sourcemaps.init({loadMaps: true}))
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest('dist'))
});