Browserify-shim不解析依赖项。
我希望将bootstrap.js & jquery.js (两者都安装在npm中)合并到vendors.js文件中，但仍然能够通过调用require('$')来使用jquery。所以我创建了gulp任务：
'use strict';
var gulp = require('gulp'),
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');
gulp.task('bulld-frontend:vendors', function(done) {
var build = browserify({
entries: [
'jquery',
'bootstrap'
]
});
build
.transform(browserifyShim)
.require('jquery')
.bundle()
.pipe(source('vendors.js'))
.pipe(gulp.dest('build/public/js'))
.pipe(plumber({
errorHandler: helpers.logError
}));
done();
});然后将配置添加到package.json中
"browser": {
"bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": "./gulp/utilities/shim-config.js",
}, 最后在gulp/utilities/shim-config.js中配置我的shims
'use strict';
module.exports = {
'jquery' : '$',
'bootstrap' : { 'depends': { 'jquery': 'jQuery'} }
};但是在运行任务之后，我接收到文件，其中引导程序位于jquery之前，因此它会抛出Uncaught Error: Bootstrap's JavaScript requires jQuery
我加了
"browserify": {
"transform": [
"browserify-shim"
]
}去package.json，但没什么用。在我看来，browserify从来没有应用过这种转换，因为如果我用.transform(browserifyShim)替换.transform(function() { throw new Error("OLOLO"); })任务仍然有效。
回答 3
Stack Overflow用户
发布于 2014-10-27 22:37:38
我以错误的方式使用了褐化和沙姆。
首先，根本不需要.transform(browserifyShim)，这是调用代码转换的错误语法。
第二，转换工作正常，我所需要的只是创建vendors.js文件并使用require('bootstrap')在其中进行引导。然后指定vendors.js作为Buld-前端:供应商任务的入口点：
var build = browserify({
basedir: 'sources/client/js'
entries: [
'./vendors.js'
]
});而且起作用了。
Stack Overflow用户
发布于 2014-11-11 13:25:43
下面是对我有用的东西，它使用了browserify-shim，并声明了package.json文件中的所有供应商库，以及它在“browserify-shim”字段中的所有依赖关系和导出。
"browser": {
"modernizr": "./app/assets/javascripts/vendor/modernizr.js",
"jquery": "./bower_components/jquery/jquery.js",
"angular": "./bower_components/angular/angular.min.js",
"angular-touch": "./bower_components/angular-touch/angular-touch.js",
},
"browserify-shim": {
"modernizr": {
"exports": "Modernizr"
},
"jquery": "$",
"angular": {
"depends": "jquery",
"exports": "angular"
},
"angular-touch": {
"depends": "angular",
"exports": "angular.module('ngTouch')"
}
}然后，在我的gulpfile.js上，我有以下函数来生成供应商包。
// function to fetch the 'browserify-shim' json field from the package.json file
function getNPMPackageBrowser() {
// read package.json and get dependencies' package ids
var packageManifest = {};
try {
packageManifest = require('./package.json');
} catch (e) {
// does not have a package.json manifest
}
return packageManifest['browserify-shim'] || {};
}
function vendor() {
var deferred = q.defer(),
b = browserify({ debug: true }).transform('browserify-shim'),
libs = getNPMPackageBrowser(),
lib;
plugins.util.log('Rebuilding vendor JS bundle');
// recursively add all of the vendor libraries as a --require or bundle.require() to browserify
for (lib in libs) {
if (libs.hasOwnProperty(lib)) {
b.require(lib);
}
}
b.bundle()
//Pass desired output filename to vinyl-source-stream
.pipe(source('vendor.js'))
.pipe(gulp.dest(publicDir + '/assets/javascripts'))
.on('end', deferred.resolve)
.on('error', handleError);
return deferred.promise;
}Stack Overflow用户
发布于 2016-03-09 13:29:46
尝试了托林发布的东西。但没有运气。对jQuery的抱怨仍未明确。
只是一点点的咆哮。所有这些狂热做模块化的要求，但工具是令人困惑的，让我们说，向前一步，然后3步后退。我们最后又做了硬编码脚本标记？
好吧，别吵了。这就是我如何让jQuery和任何jQuery插件工作。
第一件事- jQuery和任何相关的插件只需要一件事-$/ jQuery，然后一切都会工作。那么，为什么要麻烦地要求(‘jquery’)和要求(‘引导’)(如果您需要更多，您很难在js和您的package.json中编码其中的每一个--听起来很有趣吗？！)
我只是重复使用保龄球和好的老钢丝绳。
我的HTML：
<head>
<!-- bower:css -->
<!-- endinject -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<app></app>
<!-- bower:js -->
<!-- endinject -->
<script src="bundle.js"></script>好的，这是经典的有线装置。您只需要让gulp文件来观看bower.json。当你通过保龄球添加任何酒杯的时候。这将得到连接和服务。
bundle.js文件是从gulpfile.js内部生成的。
gulp.task('bundle' , ['wiredep'] , function()
{
browserify({debug: true})
.transform(
babelify.configure({stage: 0})
)
.transform(
stringify(['html'])
)
.require(
'./app/index.js', {entry: true}
)
.bundle()
.on('error' , errorHandler)
.pipe(source('bundle.js')) // vinyl-source-stream
.pipe(buffer()) // vinyl-buffer
.pipe(sourcemaps.init({loadMaps: true})
.pipe(sourcemaps.write('./'))
.on('error' , errorHandler)
.pipe(gulp.dest('./dev'));
});现在在我的包裹里，json
"browser": {
"jquery": "./bower_components/jquery/dist/jquery.min.js",
"bootstrap": "./bower_components/bootstrap/dist/jst/bootstrap.min.js",
"mdbootstrap":"./bower_components/mdbootstrap/js/mdb.min.js"
},
"browserify": {
"transform": ["browserfiy-shim"]
},
"browserify-shim": {
"jquery": "global:$"
}最后一部分是关键的‘全局:jQuery’或“全局：$”。
然后在js文件中(我用的是角和ng向前)
'use strict';
import 'bableify/polyfill';
import 'reflect-metadata';
import 'angular';
import 'angular-ui-router';
import {bootstrap} from 'ng-forward';
import {App} from './components/app/app';
import config from './config/config';
// try to test if we get the bootstrap
console.log($.fn.modal);
bootstrap(App , ['ui.router',config.name]);您应该看到控制台将显示引导模式代码。
当然，(在角度上)您实际上应该只在指令中调用$(即使在组件中)。
希望能帮上忙。
这将包装成一个月曼发电机(发电机-ngf2 2)。查看我的网站http://panesjs.com获得更多信息。
https://stackoverflow.com/questions/26480519
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号