Gulp + Browserify + Jquery + Bootstrap

Question

我试图通过NPM和gulp在我的项目中加载jquery +jquery+引导程序。

我的配置如下：

Package.json

"browser": {
    "jquery": "/node_modules/jquery/dist/jquery.js",
    "jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js"
 },
 "browserify-shim": {
    "jquery": "$",
    "jquery-ui": {
        "exports": "jquery-ui",
        "depends": [ "jquery:jQuery" ]
   }
 },
 "browserify": {
    "transform": [ "browserify-shim" ]
 },
 "dependencies": {
    "bootstrap": "^3.3.6",
    "jquery": "2.1.0",
    "jquery-ui-browserify": "^1.11.0-pre-seelio",
 }

gulpfile.js

gulp.task('browserify', function(){
  return browserify([
      'node_modules/jquery/dist/jquery.js',
      'node_modules/jquery-ui-browserify/dist/jquery-ui.js',
      'node_modules/bootstrap/dist/js/bootstrap.js', 
 ])
.bundle()
.pipe(source('core.js'))
.pipe(buffer())
.pipe(gulp.dest('build/js'));
});

然后，我从我的core.js中用assetic加载index.php，但是我得到了以下错误：

Uncaught ReferenceError: jQuery is not defined

我做错了什么？

谢谢。

Answer 1

我不知道您在做什么，但是请记住，应该传递给浏览器化实例的是应用程序的入口点，而不是依赖项。

然后，在您的应用程序中，您可以使用require函数加载这些依赖关系：

var $ = require('jquery');

在编译浏览器时，将自主地为您做两件事：

1. 他会把你需要的任何图书馆都放进你的包里。
2. 他将通过引用该库的绑定副本来替换您的require语句。

只要通过npm安装库，就不需要任何额外的配置。另一方面，如果库位于非常规位置，则需要告诉browserify如何解决它。

无论如何，您可以在回购的自述上找到更多的文档。