我有一些JavaScript代码从任意编译到JS语言编译到commonJS模块,我想使用sourcemaps调试浏览器化的代码.
所以我的文件已经//# sourceMappingURL=index.js.map有了,我希望browserify能够读取并转换它们,这样我就可以使用我原来的非JS语言进行调试.
我需要另一个变换吗？
我尝试使用browserify的调试标志,然后它确实生成了一个源图,但是它用于中间JS文件,而不是原始的非JS文件.我甚至看到原始//# sourceMappingURL语句在包中挥之不去,而我的浏览器调试器并不喜欢它.
这有可能吗？
我看到这一点:使用browserify后保留原始的打字稿源图但它不起作用.
我正在尝试使用以下插件/js/lib/stellar.jquery.js:
var $ = require('jquery');
require('./lib/stellar.jquery')
$(function(){
$.stellar();
});
当我运行这个虽然我得到jQuery没有定义.我认为恒星jQuery插件是在jq库之前加载的.在stellar插件的底部有这个代码:
...
// Expose the plugin class so it can be modified
window.Stellar = Plugin;
}(jQuery, this, document));
将"jQuery"更改为"$"也不起作用,给出"$ is not defined"
我正在使用浏览器和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结果.
任何的想法？说明？
我有一个使用browserify的小应用程序,它最近引起我的注意,有一个非常大的包.
是否有工具来分析browserify文件并找出大部分文件大小的来源？
如何减少浏览器生成文件的大小？
我正在使用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步骤以及按什么顺序完成(当然缩小必须在最后进行)？我应该用咕噜声做这一切吗？
我有一个"中等"的Typescript应用程序(在很简单,但不是企业级,数千行)依赖于jQuery,React和SocketIO - 以及其他较小的库.
我目前的gulpfile是这样的:
var gulp = require("gulp"),
$ = require("gulp-load-plugins")(),
_ = require("lodash"),
tsify = require("tsify"),
browserify = require("browserify"),
source = require("vinyl-source-stream"),
debowerify = require("debowerify"),
watchify = require("watchify"),
lr = require("tiny-lr"),
buffer = require("vinyl-buffer");
var lrServer = lr();
var config = {
scripts: {
base: __dirname + "/Resources/Scripts",
main: "Application.ts",
output: "App.js"
},
styles: {
base: __dirname + "/Resources/Styles",
sheets: ["Application.less", "Preload.less"],
autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
}, …这是一个典型的工作流程:
这很好,除非watchify需要比第3步和第4步更长的时间,因为你得到过时的代码或错误,它很糟糕.
有没有一种简单的方法来保证永远不会发生？就像watchify向我的服务器发出信号的方式一样,它应该在尝试加载请求的页面之前等待另一秒钟？如果不存在这样的事情,人们如何在实践中处理这个问题？
我必须嘲笑谷歌,因为我甚至找不到人们在谈论这个问题,除了这个说"添加一个简单的(基于节点的)服务器,它将阻止请求,直到手表完成运行:这将避免总是令人沮丧重新加载页面只是为了找到手表尚未完全运行的现象." - 但不幸的是,这是todo列表中的条目,而不是该回购中存在的内容.
browserify ×10
javascript ×9
node.js ×3
babeljs ×2
ecmascript-6 ×2
gulp ×2
source-maps ×2
watchify ×2
jquery ×1
npm ×1
performance ×1
reactjs ×1
tsify ×1
typescript ×1