标签: browserify

我正试图在Backbone应用程序中使用CommonJS模块,所以我有一个骨架Backbone View定义在/views/categories/edit.js:

app.Views.quoteCategoriesEdit = app.Ui.ModalView.extend({

    className: '',

    template: JST["templates/quotes/categories/quote-categories-edit.html"],
    events: {
        'click [data-key="save"]': 'save',
        'click [data-key="cancel"]': 'cancel'
    },
    initialize: function (options) {
        var that = this;
        _.bindAll(this, 'save', 'cancel');
        app.Collections.quotesCategories.on('change add', function () {
            that.remove();
        });
    },

    render: function () {
        var that = this;
        // boilerplate render code
        return this;
    }

});

如果有人能告诉我如何将其转换为与Browserify一起使用的CommonJS模块,那么我将非常感激,这真的有助于我理解我如何模块化其他应用程序!谢谢

我想预先编译下划线模板,并将它们包含在我的grunt-browserify的app.js目标文件中.

我知道有一个选项转换:hsbfy用于把手模板,但是如何使用下划线模板呢？

我尝试使用node-undercorify但没有成功

我有一个角度应用程序,我正在测试karma单元测试,我试图添加karma-browserify,以便我可以在我的单元测试中需要npm模块.

一旦我将browserify预处理器添加到我的karma.conf.js配置文件中,我的测试就开始破坏,即使我还没有尝试过任何模块.

我收到以下错误:

object is not a function

如果我按照跟踪,我看到导致错误的行是在调用'module'的browserify捆绑的js临时文件中

我有一个非常简单的模块,我正在与Browserify捆绑在一起.我想在浏览器和节点中使用该捆绑包.在节点中,如果我require是非捆绑模块,它可以正常工作; 但是,如果我require是浏览器化的bundle,则require返回一个空对象.这是一个复制品:

简单的模块

function Foo(bar) {
    this.bar = bar;
}

module.exports = Foo;

测试脚本

var Foo = require("./foo"); // not bundled with Browserify
var Foob = require("./foob"); // bundled with Browserify

console.log("Foo =", Foo);
console.log("Foob =", Foob);

这样执行

browserify foo.js -o foob.js
node foo-test.js 

产量

Foo = function Foo(bar) {
    this.bar = bar;
}
Foob = {}

您可以看到Foo(非捆绑版本)是预期的功能,但Foob(捆绑版本)是一个悲伤和空的对象.

所以问题是为什么浏览器模块不在节点中工作？

澄清: 我正在使用browserify捆绑我的webapp并使用其路径选项来简化应用程序的require语句中的路径并避免相对路径地狱.但是,我正在尝试使用tap进行单元测试,但它似乎没有类似的配置功能.因此,尝试在使用tap时需要非捆绑文件会导致所有内容中断.

一旦browserify将输出写入磁盘,有没有人知道触发回调的方法？

var fs = require('fs');
var browserify = require('browserify');
var b = browserify({standalone: 'MyAppModules'});
b.add('./browserifyMain.js');
b.bundle().pipe(fs.createWriteStream(__dirname + '/public/js/bundle2.js'));

这有效,但我只需要在构建包时运行rsync.

我尝试根据这篇文章添加一个'on'事件监听器:如何使用新的Browserify API？

var fs = require('fs');
var browserify = require('browserify');
var b = browserify({standalone: 'MyAppModules'});
b.add('./browserifyMain.js');
b.bundle().pipe(fs.createWriteStream(__dirname + '/public/js/bundle.js')).on('end', function(){
    console.log( 'finished writing the browserify file' );
});

但是日志永远不会返回所以我假设这也不起作用:/

此外,尝试过,但也没有工作:

var fs = require('fs');
var bundleFs = fs.createWriteStream(__dirname + '/public/js/bundle.js');
var browserify = require('browserify');
var b = browserify({standalone: 'MyAppModules'});
b.add('./browserifyMain.js');
b.bundle().pipe( bundleFs )
bundleFs.on('end', function(){
    console.log( 'finished writing the browserify …

我使用browserify来使node.js在浏览器上运行.我想执行一个子进程,所以我在index.js中做了类似的事情

 var exec = require('child_process').exec;
 //I'm just checking the node version installed, you can do your own    process here

var ls =exec('node -v', function(error, stdout, stderr) {
console.log('stdout: ' + stdout);
console.log('stderr: ' + stderr);
if (error !== null) {
console.log('exec error: ' + error);
}
}); 

使用browserify命令生成bundle.js

browserify index.js -o bundle.js -d

还包括html中的bundle.js

<script src="bundle.js"></script>

但是在浏览器的控制台中我得到了

"exec is not a function"

节点版本为v0.12.7

我正在使用Vue.js和Laravel一起使用Elixir和Browserify.我想在自己的文件中注册一些自定义全局过滤器.我试图遵循文档,但我无法让它工作.这是我得到的错误:

Uncaught ReferenceError: Vue is not defined

有任何想法吗？

这是我的代码:

VUE /过滤器/ reverse.js

Vue.filter('reverse', function (value) {
 return value.split('').reverse().join('')
})

VUE/app.js

var Vue = require('vue');
Vue.use(require('vue-resource'));

new Vue({
    el: 'app',
    data: {
        test: 'abcde'
    },
filters: {
    reverse: require './filters/reverse.js'
}

});

视图

<h1 v-text="test | reverse"></h1>

如果我在reverse.js中添加它,它仍然不起作用

var Vue = require('vue');

而我的gulpfile

    mix.browserify('app.js');

我正在使用gulp将browserify + babelify与uglifyjs捆绑在一起.但是,从我的项目生成的源图只给了我捆绑的版本,而不是捆绑的版本.

这是我的设置:

var gulp       = require('gulp'),
    source     = require('vinyl-source-stream'),
    browserify = require('browserify'),
    gutil      = require('gulp-util'),
    buffer     = require('vinyl-buffer'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify     = require('gulp-uglify'),
    file       = 'index.js';

gulp.task('build', function(){
    return browserify({
        entries: [file],
        transform: ["babelify"]
      })
    .bundle()
    .pipe(source(file))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'))
    .pipe(gutil.noop())
})

有没有办法让我创建一个捆绑babel => browserify => uglify并仍然将地图返回给我的pre-babel文件的构建？

我也不介意不使用gulp(我实际上更喜欢咕噜声,但这个设置过去常常适合我).

我想在我的项目中包含es7函数,以开始在其中使用fetch等待异步方式.

我正在使用gulp,browserify和babelify(7.2.0),阅读一些文档,我看到说babelify使用es7函数的方法是将这一行包含在babelify转换中:

optional: ['runtime', 'es7.asyncFunctions']

所以我的整个任务如下:

gulp.task('js',function(){



var bundleStream = browserify({

    entries:[config.paths.mainJs],
    debug: true,

    transform: [babelify.configure({
        presets:["es2015","react"],
        optional: ['runtime', 'es7.asyncFunctions']
    })]


}).transform("browserify-shim")
    .bundle()
    .on('error',console.error.bind(console))




bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
   // .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))


});

不幸的是,运行任务时出现以下错误:

"未知选项:解析文件时的base.optional:"

谷歌搜索有点我看到babelify 7.x确实使用babel 6.0,显然这个参数可选在babel 6.0中不再存在.

我不想降级我的babelify版本来使这项工作,但我想包括es7功能与babelify版本7,有人知道如何做到这一点？

任何帮助将非常感激,因为没有太多关于它的信息

为了以防万一,请查找我的package.json文件:

"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11", …

我的大脑受伤了,我刚刚阅读了大量不同的教程,他们似乎在如何使这项工作的想法上有所不同(或变化很快).

背景:

我已经开始学习ReactJs.NET,我想开始编写ES2015并使用该Require('SomeComponent')语句导入模块(babel还没有导入/导出).

我使用BabelBundleReact.NET附带的ES2015部件就可以正常工作了

bundles.Add(New BabelBundle("~/bundles/main").Include(
                "~/Scripts/test.jsx"
            ))

我想为项目使用一些额外的组件(多选),似乎最简单的方法是使用它来安装node + npm,然后require用来导入该组件.

这导致我用gulp替换MVC捆绑,并使用gulpfile将我的文件转换/组合成一个可用的js文件(如果我预先渲染服务器端的第一个视图,它比.NET捆绑更好) .

我需要在我的gulpfile.js中做什么,但我不是100%确定我需要做的顺序,或者我应该如何在我的gulpfile中描述这个:

• 从.jsx文件开始,然后:(不太确定以哪个顺序)
• 用反应解析它(fos jsx)
• 用babel解析它(用于ES2015语法)
• 使用browserify解析(require标签)

我甚至走在正确的道路上？似乎有这么多的选择,我对他们所有人都感到很困惑,这似乎是一个快速变化的景观......