我一直在使用factor-bundle来包装我的常见JS文件:
browserify index.js bar-charts.js list-filter.js dashboard.js
-p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ]
-o ../../static/js/common.js
然后我在我的HTML中包含了common.js以及一个Bootstrap警报:
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Alert alert!
</div>
<script src="/static/js/common.js"></script>
但警报关闭按钮不起作用,因此Bootstrap显然没有被提取.
如果我在CDN中包含Bootstrap和jQuery,在同一个HTML页面中,它可以正常工作:
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Alert alert!
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
这是一个JSFiddle与我的common.js文件,不工作:http://jsfiddle.net/2v9easbz/
这是一个JSFiddle与直接CDN链接,工作正常:http://jsfiddle.net/vkf027z2/
我的common.js文件有什么问题？
我有一个图书馆lib.js,我想从创建lib/a.js和lib/b.js并能够从脚本中使用它client.js用var a = require('lib/a.js');,它的作品时,我只是包括编译lib.js库之前client.js(因此,lib.js必须声明require,它知道函数lib/a.js)
我想我必须使用external,alias但我不确定这是什么方法
此外,是否可以使用Gulp文件自动为我的库中的文件夹创建所有别名？例如.为lib/dir 中的所有文件创建别名？
我正在使用浏览器和factor-bundle.我有以下代码:
b = browserify({
entries: [ 'a.js', 'b.js'],
plugin: [ [ 'factor-bundle', { outputs: [ 'build/a.js', 'build/b.js' ] } ] ]
})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(gulp.dest('/build/common'));
我想在parial包('build/a.js'和'build/b.js')上管理一些动作(比如uglify,bundle-collapser或其他工作).我尝试使用factor-bundle页面上描述的方法:
b.plugin('factor-bundle', { outputs: [ write('x'), write('y') ] });
function write (name) {
return concat(function (body) {
console.log('// ----- ' + name + ' -----');
console.log(body.toString('utf8'));
});
}
但我不理解write()方法,也不知道如何执行uglification以及如何gulp.dest结果.
任何的想法？说明？
我正在使用Gulp,Browserify和Babelify将我的源代码从ES6 + JSX编译为纯Javascript.
我gulpfile.js看起来像:
var gulp = require('gulp')
var fs = require("fs")
var browserify = require("browserify")
var babelify = require("babelify")
gulp.task('es6',function(){
return browserify({ debug: true })
.transform(babelify.configure({
extensions: ['.es6']
}))
.require("./src/es6/app.es6", { entry: true })
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(fs.createWriteStream("./build/js/bundle.js"))
})
我的第一行app.es6是:
"use strict"
import React from 'react'
import MenuBar from './menu'
当我运行时$ gulp es6,我收到以下错误:
Error : 'import' and 'export' may …我在http://browserify.org/中尝试示例并尝试按如下方式进行函数调用:
我的HTML是:
<!DOCTYPE html>
<html>
<head>
<title>Test Browserify</title>
<script src="bundle.js"></script>
</head>
<body>
<button onclick="hello()">test</button>
</body>
</html>
我的javascript是:
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));
function hello(){
alert("here");
}
我做了浏览mainify.js -o bundle.js,所以我可以成功使用require.
但是当我点击按钮时,我有错误:
"未捕获的ReferenceError:未定义hello"
任何建议将不胜感激!
我使用IntelliJ 14.1.4创建JavaScript应用程序.为了调试,我使用Gulp启动了一个Web服务器.然后我启动JavaScript调试并与Chrome连接(通过插件).我可以通过这种方式调试"普通"JavaScript,但是当使用源映射(由browserify创建)时,IntelliJ不再触发断点.如果我使用Chrome的调试工具,一切都按预期工作,但IntelliJ似乎无法转换其断点.
有没有办法让这项工作？我花了很长时间研究这个问题,据我所知,IntelliJ支持源地图.此外,我还能够使用这种使用源映射的方法来调试GWT生成的JavaScript.
更新:似乎此问题存在当前问题.如果知道任何工作环节,我很高兴听到解决方案.
下面的答案解决了这个问题.以下是我设置gulp构建的方法:
bundler.bundle()
.pipe(exorcist('./build/bundle.js.map', null, null, '../src'))
与./build是我生成文件夹,并../src作为JavaScript源文件的根,相对于生成的文件夹.
我试图同时掌握browserify和ES6.我有以下基本的Node文件:
main.js
var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);
foo.js
exports.math = (n)=>{
return n * 111;
};
现在我想做以下事情:
bundle.js以便将其作为脚本包含在我的网站中bundle.js以改善浏览器中的加载时间我在全局安装了browserify,并使用以下命令运行:
browserify main.js > bundle.js
效果很好.但我应该先运行babel吗？我如何完成我的3步骤以及按什么顺序完成(当然缩小必须在最后进行)？我应该用咕噜声做这一切吗？
这是一个典型的工作流程:
这很好,除非watchify需要比第3步和第4步更长的时间,因为你得到过时的代码或错误,它很糟糕.
有没有一种简单的方法来保证永远不会发生？就像watchify向我的服务器发出信号的方式一样,它应该在尝试加载请求的页面之前等待另一秒钟？如果不存在这样的事情,人们如何在实践中处理这个问题？
我必须嘲笑谷歌,因为我甚至找不到人们在谈论这个问题,除了这个说"添加一个简单的(基于节点的)服务器,它将阻止请求,直到手表完成运行:这将避免总是令人沮丧重新加载页面只是为了找到手表尚未完全运行的现象." - 但不幸的是,这是todo列表中的条目,而不是该回购中存在的内容.
由于回归风险,我的项目被迫处于1.6.9(例如,小写在1.7中已经过时).
但最近,我做了一个npm更新,所有我的业力/幻影测试都失败了,给予了
PhantomJS 2.1.1 (Windows 7.0.0)
Error: [$injector:unpr] Unknown provider: $$taskTrackerFactoryProvider <- $$taskTrackerFactory <- $browser <- $rootScope <- $browser
http://errors.angularjs.org/1.6.9$injector/unpr?p0=%24%24taskTrackerFactoryProvider%20%3C-%20%24%24taskTrackerFactory%20%3C-%20%24browser%20%3C-%20%24rootScope%20%3C-%20%24browser in C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify (line 8627)
c:/Users/XXX/AppData/Local/angular/angular.js:4887:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8627:86
getService@c:/Users/XXX/AppData/Local/angular/angular.js:5047:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8787:39
c:/Users/XXX/AppData/Local/angular/angular.js:4892:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8632:48
getService@c:/Users/XXX/AppData/Local/angular/angular.js:5047:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8787:39
injectionArgs@c:/Users/XXX/AppData/Local/angular/angular.js:5072:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8812:68
invoke@c:/Users/XXX/AppData/Local/angular/angular.js:5098:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8838:31
c:/Users/XXX/AppData/Local/angular/angular.js:4893:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8633:43
getService@c:/Users/XXX/AppData/Local/angular/angular.js:5047:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8787:39
injectionArgs@c:/Users/XXX/AppData/Local/angular/angular.js:5072:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8812:68
invoke@c:/Users/XXX/AppData/Local/angular/angular.js:5098:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8838:31
$get@c:/Users/XXX/AppData/Local/angular/angular.js:4972:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8712:49
invoke@c:/Users/XXX/AppData/Local/angular/angular.js:5106:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8846:24
c:/Users/XXX/AppData/Local/angular/angular.js:4893:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8633:43
getService@c:/Users/XXX/AppData/Local/angular/angular.js:5047:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:8787:39
$$cleanup@c:/Users/XXX/AppData/Local/angular-mocks/angular-mocks.js:3281:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:3282:36
$$afterEach@c:/Users/XXX/AppData/Local/angular-mocks/angular-mocks.js:3253:0 <- C:/Users/XXX/AppData/Local/Temp/b99f75028e9c85bb8c30a356a1480903.browserify:3254:23
我的package.json(我删除了专有模块):
{
"name": "XXX",
"code": "XXX",
"version": "1.0.0", …我正在尝试在 Javascript 项目中使用tiny-secp256k1 。我希望代码与 Node.js 和浏览器兼容，索引文件中的 require 模块是：
const createHmac = require('create-hmac')
const ecc = require('tiny-secp256k1')
Browserify对于create-hmac没有问题，但对于tiny-secp256k1我收到以下错误：
Error: Can't walk dependency graph: Cannot find module 'tiny-secp256k1'
在 github 存储库中，有一些在 React 应用程序中使用的库的示例。但我不知道它是如何工作的。
可以在浏览器中使用这个库吗？
browserify ×10
javascript ×9
node.js ×3
babeljs ×2
ecmascript-6 ×2
gulp ×2
angularjs ×1
phantomjs ×1
reactjs ×1
secp256k1 ×1
source-maps ×1
watchify ×1