使用 gulp+browserify 捆绑单独的供应商文件

Question

更新1

我已经接近了，但某些模块仍然存在问题。 具体来说，我正在尝试包含 Morris.js (morris.js06) 包。

我现在似乎能够生成单独的应用程序和供应商包。 JQuery、Bootstrap等都是外部引用的。但有些软件包似乎仍然不起作用。

在我的应用程序打字稿文件中，我有这个。

import "raphael";
import { Morris } from "morris.js06";

我像这样捆绑它。

var bundler = browserify({
            entries: ['wwwroot/scripts/App.ts'],
            cache: {},
            packageCache: {}
        });
        packageReferencesArray.forEach(function (packageReference) {
            console.log('Excluding ' + packageReference.packageName);
            bundler.exclude(packageReference.packageName);
            bundler.external(packageReference.packageName);
        });

        bundler.external('Morris');

当我查看输出文件时，我看到了这一点。

在浏览器中，这是不存在的。应该是 Morris.Area 而不是 morris_js06.Morris.Area 吗？ 我还可以看到莫里斯是定义的。就像 browserify 不遵守 .external 命令？

结束更新1

结束更新1

我正在开发一个 Orchard Core 主题，旨在捆绑一些可供其他模块使用的核心模块。

例如，我希望主题模块包含 bootstrap 和 jquery - 当应用主题时，任何其他模块应该能够使用 jquery 中的 $ 。 该模块应该有一个用于我的 theme.vendor.js 文件的标签（我正在尝试使用 gulp+browserify 创建该文件）。

我目前正在尝试执行此操作的 Vendor.ts 文件：

import $ from "jquery";
import "bootstrap";

我还有一个 Main.ts 文件，它可以执行类似的操作

import $ from "jquery";
$(document).ready... //The rest is not relevant to this post

我的 gulp 文件有两个任务。一个用于创建供应商包，一个用于创建模块/主题包。

我看到两个包都已创建，但在浏览器中我看到如下内容：

我认为这对于我所包含的各种外部事物都是如此。我使用的一些软件包似乎也称为“jQuery”，而不是“jquery”或“$”

如何设置 gulp+browserify 任务来生成一个能够正确捆绑并在浏览器中公开这些内容的供应商.js 文件？

这是我的 gulp 供应商捆绑任务。

gulp.task('create-vendor-bundle-js', function (cb) {
    var bundler = browserify(
        {
            entries: ['wwwroot/scripts/Vendor.ts'],
            cache: {},
            packageCache: {},
        });

    bundler.plugin(tsify).plugin(errorify)
        .bundle()
        .pipe(source('vendor.bundle.js'))
        .pipe(gulp.dest('wwwroot/bundles/js'));

    return cb();
});
enter code here

browserify api 中有什么东西可以让我从包中导出 $ 吗？或者我只是做错了？我查看了其他与此相关的问题，并进行了大量的谷歌搜索+阅读，但还没有达到我想要的效果。

蒂亚！

Answer 1

更新：我已经从 Gulp 转向使用 WebPack，在那里我能够完成这项任务。