标签: browserify

我正在运行基于Express,Jade和Less的Node App项目.我正在使用' Gulp '(流式构建系统)以及'browserify'和'gulp-browserify'.但是当我运行Gulp Task时,它的抛出错误就像是

[gulp] SyntaxError in plugin 'gulp-browserify': <my_project_path>/assets/javascripts/fake_a3100e75.js 

该文件fake_a3100e75.js似乎不存在于目录中.

有没有人遇到同样的问题？任何解决方案高度赞赏

关于Browserify.js的一个简单问题,它只是一个适合您的开发环境的工具,还是与客户在实时网站上运行的东西？如果您可以在生产中使用它,您是否必须在Web服务器上运行Node？我知道它用于打包js模块,但是如果你只是将这些模块打包并然后将该bundle.js文件转移到生产中,那就很奇怪了.

我有一个骨干应用程序正常运行.它意味着在第3页中用作小部件.不幸的是,我刚刚意识到其中一个页面已经加载了Backbone/underscore.

我得到这样的错误:

Uncaught TypeError: Cannot read property 'extend' of undefined 

通常在先前未加载下划线时出现.

我的典型视图是这样的:(正常的Backbone视图)

./view1.js

var Backbone = require('backbone')
var _ = require('underscore')
var $ = require('jquery')
Backbone.$ = $

module.exports = Backbone.View.extend({

  events: {

  },

  initialize: function () {

  },

  render: function () {

  }
})

然后我只需要打电话给它:

var View1 = require('view1')
var view1Instance = new View1(...)

谢谢你的帮助 :)

调查后编辑:当运行调试器时,看起来Backbone变量是一个空对象而不是Backbone.好像require('backbone')刚回来了{}

编辑2:这似乎与这个问题有关:https://github.com/substack/node-browserify/issues/790

当我尝试使用bowserify,angularjs和coffeescript时,我遇到了一个问题.

事实上,当我尝试要求('angular')时,我得到一个空对象:

angular = require('angular')
console.log angular ## return an empty object {}

configuration = require('../../config/config') 
console.log configuration ## returns my fully config file correctly

我不知道为什么在这种情况下它不能正常工作: - /.这是我的package.json,其中我放置了我的个人角度依赖项:

{
    "dependencies": {
        "gulp": "*",
        "gulp-browserify": "*",
        "coffeeify": "*",
        "gulp-concat": "*"
    },
    "browser": {
        "angular": "./app/core/angular-libs/angular.min.js",
        "angular-route": "./app/core/angular-libs/angular-route.min.js",
        "angular-animate": "./app/core/angular-libs/angular-animate.min.js"
    }
}

这是我的gulp文件,它在dest文件夹中生成我的bundle.js:

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');

gulp.task('scripts', function () {
    return gulp.src('app/**/*.coffee', { read: false })
        .pipe(browserify({ transform: ['coffeeify'], extensions: ['.coffee'] }))
        .pipe(concat('bundle.js')) …

我有一个项目,其中包含一些相对不相交的页面,每个页面都包含自己的入口点脚本.这些脚本require使用commonjs语法很多其他脚本,需要通过6to5进行转换并由browserify捆绑.

我想设置一个gulp任务,捕获匹配模式的所有文件并将它们传递给bundler,但我不知道如何将文件传递gulp.src给browserify(filename).

我的gulpfile看起来像:

var gulp = require("gulp");
var browserify = require("browserify");
var to5browserify = require("6to5-browserify");
var source = require("vinyl-source-stream");

var BUNDLES = [
    "build.js",
    "export.js",
    "main.js"
];

gulp.task("bundle", function () {
    /* Old version, using glob:
    return gulp.src("src/** /*.js")
        .pipe(sixto5())
        .pipe(gulp.dest("dist"));
    */

    // New version, using array:
    return BUNDLES.map(function (bundle) {
        return browserify("./src/" + bundle, {debug: true})
            .transform(to5browserify)
            .bundle()
            .pipe(source(bundle))
            .pipe(gulp.dest("./dist"));
    });
});

gulp.task("scripts", ["bundle"]);

gulp.task("html", function () {
    return gulp.src("src/**/*.html")
        .pipe(gulp.dest("dist"));
});

gulp.task("styles", …

无论出于何种原因,我browserify并gulp停止工作.例如,这是我的gulp js脚本捆绑我的JavaScript.

gulp.task('js', function() {
    gulp.src('src/js/*.js')
        .pipe(plumber())
        .pipe(gulp.dest('js'));
    return browserify('./src/js/main', { debug: true })
    .bundle()
    .pipe(source('bundle.js'))
/*    .pipe(streamify(uglify()))*/
    .pipe(gulp.dest('.'))
    .pipe(notify({ message: 'JavaScript has been bundled with Browserify!'}));
    // .pipe(livereload());
});

这是main.js:

var ajaxChng = require('./ajax-changelog');
ajaxChng();

里面src/js/ajax-changelog.js是这样的:

module.exports = {
    console.log('Hello World');
};

但当我这样做时gulp js,我得到:

? gulp js
[19:11:50] Using gulpfile c:\wamp\www\osrsmap\gulpfile.js
[19:11:50] Starting 'js'...

events.js:85
      throw er; // Unhandled 'error' event
            ^
SyntaxError: Unexpected token

... 我究竟做错了什么？

我正在用ES6和JSX编写一个React应用程序.下面是我用来浏览我的文件的命令..es6bundle.js

$ browserify src/es6/app.es6 -t babelify -o build/js/bundle.js

当我尝试使用类似的东西导入组件时import MenuBar from './menu',我收到错误消息:

Error: Cannot find module './menu'

我找到的唯一解决方法是添加.es6文件名(import MenuBar from './menu.es6'),这看起来不太吸引人.

有没有办法让browserify或babelify知道导入模块时使用的扩展？

npm在构建js应用程序时,我需要帮助在脚本中运行一系列命令.

现在我正在运行这一行:

"scripts": {
    "build-js": "browserify src/app/main.js --debug | exorcist dist/app.js.map > dist/app.js",
}

浏览并提取源图.但我也希望能够缩小uglifyjs2.

如何管道uglifyjs以获得具有外部源图的缩小源？

任何人都可以帮我解决这个问题吗？我正在努力学习如何使用Laravel的elixir.browserify + vue.js,但我无法完成这项工作!我收到这个错误:

gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

D:\xampp\htdocs\pwebdev-project\resources\assets\js\components\skills.vue:1
<template>
^
ParseError: Unexpected token

知道可能是什么问题吗？我是否需要指定我想要使用vueify的地方,或者我只需要像我一样安装它？

的package.json

{
  "private": true,
  "devDependencies": {
    "babel-runtime": "^6.3.13",
    "gulp": "^3.8.8",
    "vue-hot-reload-api": "^1.2.2",
    "vueify": "^7.0.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "laravel-elixir": "^4.0.0",
    "vue": "^1.0.11",
    "vue-resource": "^0.1.17"
  }
 }

gulpfile.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.browserify('main.js');
});

main.js

var Vue = require('vue')
var Skills = require('./components/skills.vue')

new Vue({
    el: '#app',
    components: {
        'skills' : Skills
    }
})

和/components/skills.vue

<template>
    <div> …

我运行这个命令:

browserify src.js -t [ babelify --presets [ react ] ] > build.js

我得到一个可以由它自己使用的文件.工作正常,但它的NODE_ENV设置为开发,我得到一个关于下载React DevTools的console.log.

如何将其设置为生产？我浏览了一下,没有发现任何对我有用的东西.我尝试了envify,但没有运气(我对JS构建非常新手).

我尝试将--NODE_ENV生产放在上面的某个位置,但我对浏览器和babelify非常新,所以我基本上都在进行反复试验.