防止 browserify 包含模块的依赖项答案

【问题标题】：Prevent browserify from including module's dependencies防止 browserify 包含模块的依赖项
【发布时间】：2015-02-25 19:20:11
【问题描述】：

我想在浏览器中使用我的 NodeJS 模块 - 所以我使用 browserify 来处理它。

现在，如何阻止 browserify 在捆绑文件中包含模块的依赖项？在这种情况下，依赖项是 lodash，我将在 index.html 中单独加载它。

这是我目前得到的：

index.html

<script src="lodash.js"></script>
<script src="my-module.js"></script>

index.js

var _ = require('lodash');

_.each([0, 1, 2], function(item) {
    console.log(item);
});

gulp.js

var browserify = require('browserify'),
  source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  return browserify()
    .require('./index.js', {
      expose: 'my-module'
    })
    .bundle()
    .pipe(source('my-module.js'))
    .pipe(gulp.dest('./'));
});

【问题讨论】：

为什么要单独加载？ browserify 的主要目标是捆绑一切......
嗯，前端应用程序 (index.html) 已经将 lodash _ 设置为全局。
也许您应该更改前端应用程序？泄漏全局变量并不是最佳实践。
抱歉，我不同意，我有一个 Angular SPA，其中 angular 和 lodash 作为全局变量。我认为这没有什么问题。
@loganfsmyth 捆绑一切使开发更容易，但为什么要在部署期间捆绑依赖项？大多数常见的库已经托管在 Google 和 Cloudflare 的 CDN 上；此外，用户的浏览器可能已经缓存了这些库。捆绑所有内容会失去速度优势。

标签： javascript node.js gulp browserify

【解决方案1】：

browserify-shim 提供设置全局变量的选项。

这是我对代码所做的更改。

package.json

{
  "browserify-shim": {
    "lodash": "global:_"
  },
  "browserify": {
    "transform": ["browserify-shim"]
  }
}

gulp.js

gulp.task('browserify', function() {
  return browserify('./index.js')
    .require('./index.js', {
      expose: 'my-module'
    })
    .transform('browserify-shim', {
      global: true
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'));
});

【讨论】：

【解决方案2】：

有一个排除文件的选项：

用法：browserify [入口文件] {OPTIONS}
[...]
--ignore, -i 用空存根替换文件。文件可以是 glob。
--exclude, -u 从输出包中省略一个文件。文件可以是 glob。

https://github.com/substack/node-browserify#usage

以及对应的exclude函数：

b.exclude(文件)

防止模块名称或文件中的文件显示在输出包中。

如果您的代码尝试 require() 该文件，除非您提供了另一种加载机制，否则它将抛出该文件。

所以你应该试试这个：

return browserify()
  .require('./index.js', {
    expose: 'my-module'
  })
  .exclude('lodash.js')
  .bundle();

【讨论】：

【解决方案3】：

我想通了。

const nodeOnlyModule = eval('require')('module-name');

这样你就可以欺骗 browserify。

【讨论】：

注意：不鼓励使用eval()。