使所需的依赖项可以从捆绑包外部访问

Question

我正在使用 Gulp 和 Browserify 构建一个 TypeScript 库，它依赖于一些其他库，例如通过 NPM jQuery。这是我当前的 gulpfile：

var Gulp = require("gulp");

var Browserify = require("browserify");
var Buffer = require("vinyl-buffer");
var Rename = require("gulp-rename");
var Source = require("vinyl-source-stream");
var Tsify = require("tsify");
var Uglify = require("gulp-uglify");

var Manifest = require("./package.json");

Gulp.task("build-Debug", function () {
    return Browserify({
        debug: true,
        standalone: Manifest.name
    })
        .add(Manifest.main)
        .plugin(Tsify)
        .bundle()
        .on("error", function (error) { console.error(error.toString()); })
        .pipe(Source(Manifest.name + ".js"))
        .pipe(Buffer())
        .pipe(Gulp.dest("./dist"));
});

捆绑的 JS 文件包含在我的网站中，一切正常。我只是遗漏了一件事：在某些站点上，我需要定义一些不应包含在库中的自定义 JS。例如，这些自定义脚本应该能够使用 jQuery，但它不能，因为它无法从包外部访问。

现在，我可以再次包含它，但这对我来说没有意义。所以我想知道：

有没有办法让我的 package.json 中的所有依赖项都可以从捆绑包外部访问，这样我就可以调用

$("#my_id")....

在我的自定义客户端脚本中？

Answer 1

您可以使用 Browserify 的 require 方法将模块公开为 external requires:

return Browserify({
    debug: true,
    standalone: Manifest.name
})
.add(Manifest.main)
.require("some-module") // Some module in node_modules that you want to expose.
.plugin(Tsify)
.bundle()
...

您将在 <script> 元素中获取模块，如下所示：

<script>
  var someModule = require("some-module");
  /* ... */
</script>

要验证这是否确实有效，您可以使用以下文件对其进行测试：

build.js

const browserify = require("browserify");
const path = require("path");

browserify("app.js")
    .require("jquery")
    .bundle()
    .pipe(process.stdout);

app.js

const jquery = require("jquery");
console.log("Hello, world.")

index.html

<!doctype html>
<html>
<head>
    <title>so-41095676</title>
</head>
<body>
    <script src="./bundle.js"></script>
    <script>
      console.log(require("jquery"));
    </script>
</body>
</html>

在目录中创建文件并运行这些命令：

npm install browserify jquery
node build.js > bundle.js

然后打开 index.html，您应该会看到 jQuery 函数记录到控制台。

使所需的依赖项可以从捆绑包外部访问

Make required dependencies accessable from outside of bundle

javascript

node.js

browserify

gulp