标签: browserify

当我使用Browserify 3.30.2(browserify file.js -o bundle.js)编译markdown-symbols时,我得到类似的东西:

!function(e){if("object"==typeof exports...[function(_dereq_,module,exports){

},{}],2:[function(_dereq_,module,exports){
...
...
[on line 8000] 
    : function (str, start, len) {
        if (start < 0) start = str.length + start;
        return str.substr(start, len);
    }
;

}).call(this,_dereq_("C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js"))
},{"C:\\Users\\Me\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js":11}],14:[function(_dereq_,module,exports){
module.exports=_dereq_(3)
},{}],15:[function(_dereq_,module,exports){
module.exports=_dereq_(4)
},{"./support/isBuffer":14,"C:\\Users\\ME\\AppData\\Roaming\\npm\\node_modules\\browserify\\node_modules\\insert-module-globals\\node_modules\\process\\browser.js":11,"inherits":10}],16:[function(_dereq_,module,exports){
var frep = _dereq_('frep');
var file = _dereq_('fs-utils');
var delims = _dereq_('delims');
var _ = _dereq_('lodash');
...

如您所见,这里有我的文件的绝对路径.为什么？我该如何删除它们？

编辑:这是我的build.js文件

 var browserify = require('browserify-middleware')
fs = require('fs');
var b = browserify('./index.js', {
    'opts.basedir': './'
});
b({
    // Mocks …

我正在尝试将一个uncss npm模块编译成一个适合ExecJS编译的.js文件.例如,咖啡脚本的家伙有这个.目标是为它创建一个简单的ruby包装器,类似于ruby-coffee-script.

我试过的远:

1. 遇到了一个暗示UglifyJS的答案.无处可去.

2. 使用了browserify,它应该已经完成​​了这个技巧,但它无法使用以下错误消息编译lib/uncss.js:

   Error: ENOENT, open 'tls' while resolving "tls" from file /home/prajjwal/code/uncss/node_modules/request/node_modules/forever-agent/index.js
   

   Run Code Online (Sandbox Code Playgroud)

我想这是因为browserify没有适当的垫片吗？我也关注浏览器替换节点模块的垫片.它们完全可以安全使用吗？我将把它嵌入红宝石中.不要认为浏览器是我应该使用的.还有另一种方法我可以从npm模块生成一个独立的.js吗？

任何帮助赞赏.

我按照这里的说明操作:https://www.npmjs.org/package/grunt-browserify,尝试在grunt上设置browserify的源映射.我的gruntfile中的browserify选项是:

browserify: {
            options: {
                bundleOptions : {
                    debug: true 
                }
            },
            dist: {
                files: {
                    "public/client.bundle.js": ["bundle.js"]
                }
            }
        }

bundle.js的生成没有任何问题,但源映射生成不会发生.我的grunt-browserify选项有什么问题吗？

谢谢你的期待.

我有这个代码,由于我无法理解的原因,在使用时产生一个空对象require().我的文件结构是这样的:

src
|__ public
    |__ javascript
        |__ collections
            |   categories.js
            |   listings.js <-- Always an empty object
        |__ models
            |   category.js
            |   employer.js
            |   listing.js
            |   location.js
        |   routing
        |   templates
        |   tests
        |   ui-components
        |   views

问题文件是collections/listings.js,在需要时似乎只是输出为空对象,如下所示:

var ListingsCollection = require('../collections/listings')

src/public/javascript/collections/listings.js 看起来像这样:

var $        = require('jquery'),
    _        = require('underscore'),
    Backbone = require('backbone'),
    Listing  = require('../models/listing');

Backbone.$ = $;

module.exports = Backbone.Collection.extend({
    url: '/listings',

    model: Listing,

    parse: function (response) {
        return response.listings;
    }
});

这是一个出错的例子: …

我用Laravel开发了一个网站,现在我想在它的博主部分添加Yoast插件来改进网站博客.
正如我从Yoast github可以看到的,它有一个javascript版本可以添加到自定义网站.
使用帮助不是很有帮助,所以如果有任何身体可以帮助我.

var SnippetPreview = require( "yoastseo" ).SnippetPreview;
var App = require( "yoastseo" ).App;

window.onload = function() {
var focusKeywordField = document.getElementById( "focusKeyword" );
var contentField = document.getElementById( "content" );

var snippetPreview = new SnippetPreview({
    targetElement: document.getElementById( "snippet" )
});

var app = new App({
    snippetPreview: snippetPreview,
    targets: {
        output: "output"
    },
    callbacks: {
        getData: function() {
            return {
                keyword: focusKeywordField.value,
                text: contentField.value
            };
        }
    }
});

app.refresh();

focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
contentField.addEventListener( 'change', …

我使用browserify(使用browserify-middleware)我如何需要简单的文本文件,例如:

var myTmpl = require("myTmpl.txt");

我为browserify购买了stringify插件,但文档中的代码不能与browserify V2一起使用

我试图使用Bootstrap 3.0与Browserify 5.9.1,但得到以下错误:

Uncaught ReferenceError: jQuery is not defined

这样做的正确方法是什么？

这是我的package.json的相关部分:

{
  ...
  "scripts": {
    "bundle": "browserify main.js -o bundle.js --debug --list"
  },
  "dependencies": {
    "backbone": "~1.1.x",
    "jquery": "~2.1.x",
    "underscore": "~1.6.x"
  },
  "devDependencies": {
    "browserify": "^5.9.1",
    ...
  },
  ...
}

需要引导程序的模块如下所示:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

我不喜欢的两件事是:

1. 使用Bower下载Bootstrap.AFAIK无法使用npm获取它.这使得路径非常长且笨拙.有没有办法使Bootstrap npm友好？
2. Bootstrap不是这个模块的直接依赖,它是一种jQuery插件.加载时,它只是在文档上创建一些事件处理程序来处理来自Bootstarp小部件的事件.我必须要求创建这些事件处理程序.这是正确的方法吗？

当然,在所有这些之后,我仍然得到"jQuery未定义"错误.我正在拉我的头发试图让这个工作.请帮忙!

PS早些时候我在图片中有了grunt-browserify插件,并很快意识到它使用的是浏览器版本4.x而没有源映射功能.这使得调试变得更加困难,因此我很快将其从图片中删除并直接从npm运行browserify.

假设找到以下代码bundler.js并跟踪entry.js导致var B = require('backbone');(Backbone是按声明的方式安装的依赖项package.json).

var browserify = require('browserify');
var bundle = new browserify();
bundle.add('entry.js');
bundle.bundle({
  noParse: ['backbone']
});

执行此捆绑包会生成包含原始backbone源的流.基于browserify的命令行选项,我预计它会完全跳过主干.通过源阅读,我预计以下可能会有效:

var browserify = require('browserify');
var bundle = new browserify({
    noParse: ['backbone']
});
bundle.add('entry.js');
bundle.bundle();

虽然backbone源仍然出现在流输出中.

是否可以--noparse=FILE在api的这个应用程序中用作配置选项？

我正在使用gulp + browserify来构建和打包我的javascript库.现在有一件事困扰着我:我正在通过gulp运行一个带有livereload的简单服务器进行开发.这工作正常,但每当我的javascript包含语法错误时,browserify会抛出一个错误导致服务器停止.

我使用的browserify代码(注意我添加了一个错误处理程序):

browserify("./src/main.js")
   .bundle({standalone: "SomeName", debug: false}).on('error', notify.onError({
            message: "Error: <%= error.message %>",
            title: "Failed running browserify"
    })
);

现在出现了一个有趣的部分:当我删除独立设置(并且我的js语法不正确)时,错误处理程序将触发.但是,当我使用此独立设置时,错误处理程序不会触发(导致服务器通过gulp停止启动)

有人知道如何处理这个问题吗？我总是可以在gulp中手动验证我的js文件,但是我想避免这种解决方法

我正在尝试使用gulp-browserify生成一个bundle.js文件,该文件可以包含在客户端的浏览器中并开始呈现React组件.

这是我的App.js文件:

/** @jsx React.DOM */
var React = require('react');

var App = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}!</h1>;
  }
});

module.exports = App;

还有我的package.json:

  "name":"hellosign-gulp",
  "version":"0.1.1",
  "dependencies": {
    "gulp": "3.5.x",
    "gulp-browserify": "0.5.0",
    "reactify": "~0.8.1",
    "react": "^0.10.0",
    "gulp-react": "0.2.x"
  }
}

和我的gulpfile

var   gulp = require('gulp'),
  react = require('gulp-react'),
  browserify = require('gulp-browserify');


gulp.task('brow-test', function() {
    // Single entry point to browserify
    gulp.src('./src/App.js', {read: false})
        .pipe(browserify({
          insertGlobals : true,
          transform: ['reactify'],
          extensions: ['.jsx'],
          debug :false.
        }))
        .pipe(gulp.dest('.'))
});

现在,当我运行'brow-test'时,我将输出文件重命名为bundle.js,并将其包含在浏览器的HTTP响应中.bundle.js文件非常大,所以我不会在这里包含它,但浏览器最终会抛出错误

未捕获的ReferenceError:未定义require …