javascript - Browserify 需要使用 Browserify 构建的 vendor 模块

Question

我在使用 Browserify 需要 vendor 库时遇到问题。

我使用的 vendor 库是 better-dom ，它也是用 Browserify 构建的。我从 bower 安装它，当我尝试构建时，我得到:

Error: Cannot find module './utils' from '<...>/bower_components/better-dom/dist'

显然 Browserify 正在尝试解析和处理预构建库中的 requires 语句。我尝试了 browserify-shim 和 modulify 但没有成功，下面还包括其他尝试。感谢任何帮助，提前致谢。

我的配置:

package.json:

...
"browser": {
  "DOMLegacy": "./bower_components/better-dom/dist/better-dom-legacy.js",
  "DOM": "./bower_components/better-dom/dist/better-dom.js"
},
...

Gulpfile.js:

gulp.task('scripts', function() {
  var bundle = browserify({
    noparse: ["<...>bower_components/better-dom/dist/better-dom.js"]
  });

  bundle.add('./js/all.js');

  // bundle.external("./bower_components/better-dom/dist/better-dom-legacy.js");
  // bundle.external("./bower_components/better-dom/dist/better-dom.js");

  // bundle.transform({ modulify: {
  //   "./bower_components/better-dom/dist/better-dom-legacy.js": "DOMLegacy",
  //   "./bower_components/better-dom/dist/better-dom.js": "DOM"
  // }});

  // bundle.require(
  //   "./bower_components/better-dom/dist/better-dom-legacy.js",
  //   { expose: "DOMLegacy" });
  // bundle.require(
  //   "./bower_components/better-dom/dist/better-dom.js",
  //   { expose: "DOM" }
  // );

  return bundle.bundle()
    .on('error', function(e) {
      console.log(e.toString());
      this.emit('end');
    })
    .pipe(source('all.js'))
    .pipe(gulp.dest(paths.assets));
});

Answer 1

我刚刚发现 browserify 5 中的 noparse 选项存在错误。

解决方法:使用此选项的旧名称:noParse(仍在 browserify 5 中工作)

var bundle = browserify({
    noParse: ["<...>bower_components/better-dom/dist/better-dom.js"]
});

它应该修复您的构建。