如果我使用gulp和browserify，如何使JQuery可以访问经典的JavaScript文件

Question

我们决定通过npm来管理我们的JS依赖项，并且我试图通过连接不同的JS库来创建单个文件bundle.js：

const vendors = [
    'jquery',
    'jquery-ui',
    'react',
    'react-dom',
    'highlight.js',
    'jquery-mousewheel',
    'select2',
    'moment-timezone',
];

const destination = {
    js: './static/assets/js'
};

gulp.task('build:vendor', () => {
    const browserify = Browserify({
        insertGlobals: true,
        debug: true
    });

    vendors.forEach(lib => {
        browserify.require(lib);
    });

    browserify.transform('browserify-shim', {global: true}).bundle()
        .pipe(source('vendor.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest(destination.js));
});

结果，bundle.js文件在适当的位置创建，并且我通常在我的HTML页面中包含它：

...
<script type="text/javascript" src="/static/assets/js/vendor.js"></script>
<script type="text/javascript" src="/static/js/ui.js' %}"></script>
...

在ui.js中，我尝试执行标准JS代码：

$(function() {
    alert('Foo');
});

我的浏览器控制台出错：

$ is not defined

我的package.json包含此内容，但我不确定是否需要这些配置：

"browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "global:$"
  }

我做错了什么？ 我已经尝试browserify-shim，但没有任何结果。