防止 browserify 包含模块的依赖项

Question

我想在浏览器中使用我的 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('./'));
});

Answer 1

有一个选项可以排除文件：

Usage: browserify [entry files] {OPTIONS}
[...]
--ignore, -i Replace a file with an empty stub. Files can be globs.
--exclude, -u Omit a file from the output bundle. Files can be globs.

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

以及对应的exclude函数：

b.exclude(file)

Prevent the module name or file at file from showing up in the output bundle.

If your code tries to require() that file it will throw unless you've provided another mechanism for loading it.

所以你应该试试这个：

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

Answer 2

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('./'));
});

Answer 3

我想通了。

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

这样你就可以欺骗 browserify。

防止 browserify 包含模块的依赖项

Prevent browserify from including module's dependencies

javascript

node.js

browserify

gulp