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-File包含在我的网站中，一切正常。我只是缺少一件事：在某些网站上，我需要定义一些不应该成为库的一部分的自定义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函数已登录到控制台。

从bundle

1 个答案: