标签: browserify

我来自AMD,似乎已经做错了.

我做了这样的设置:

client/js/index.js (entry point)
client/js/test.js

我希望它建立:

build/app.js

index.js需要test.js像这样:

var test = require('./test');

我的gulp watchify任务看起来像这样:

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');

// https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
gulp.task('watch', function () {
    var bundler = watchify(browserify('./client/js/index.js', watchify.args));

    bundler.on('update', rebundle);

    function rebundle () {
        return bundler.bundle()
            // Log errors if they happen.
            .on('error', function(e) {
                gutil.log('Browserify Error', e.message);
            })
            .pipe(source('app.js'))
            .pipe(gulp.dest('./build'));
    }

    return rebundle();
});

编译后的代码看起来很糟糕,因为test.js …

我正在使用gulp.watch遇到这个错误.基本上,当测试单元因错误而失败时,watch命令会挂起 - 即只运行一次然后watch再次不会触发事件.

规定的解决方法是使用gulp-plumber来防止错误退出.但是,这仅适用于流.如果我和browserify一起运行业力测试,我的配置看起来与此类似(我无法确定如何将流连接到这个坏男孩以启用管道工):

gulp.task('watch', function() {
  gulp.watch('src/**/*.js', ['test']);
  gulp.watch('test/**/*.spec.js', ['test']);
});

gulp.task('test', function () {
  return karma.server.start({
    files: [
      'test/**/*.spec.js'
    ],
    frameworks: ['browserify', 'jasmine'],
    preprocessors: {
      'test/**/*.spec.js': ['coverage', 'browserify']
    },
    browsers: ['PhantomJS'],
    reporters: ['coverage', 'spec', 'failed'],
    browserify: {
      debug: true,
      transform: ['browserify-istanbul']
    },
    singleRun: true
  });
});

有没有人有一个解决方法来运行测试单元与手表或建议如何让这与gulp管道工一起工作？

这是通过命令行执行时的错误gulp scripts:

TypeError:Object#<Transform>没有方法'transform'

这是gulpfile.js:

var gulp            = require ('gulp')
    , browserify    = require ('gulp-browserify')
    , source        = require ('vinyl-source-stream')
    , reactify      = require ('reactify');

gulp.task('scripts', function () {
  browserify('./assets/js/main.js')
    .transform(reactify)
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./static/js'));
});

gulp.task('default', ['scripts']);

我真的不知道如何解决这个问题.我在互联网上搜索,但我发现的任何内容都接近我的具体错误.

所以我通过NPM和Browserify使用ReactJS,但是我试图弄清楚如何在生产模式下构建它,就像自述文件所说,但它似乎没有用.我有这个代码来设置browserify:

var browserify = require('browserify');
var envify = require('envify/custom');
var debug = false;

...

var libraries = browserify({
  debug: debug
}).transform(envify({
  _: 'purge',
  NODE_ENV: debug ? 'development' : 'production'
}));

gulpConfig.tasks.browserify.transformers.forEach(function(transform) {
  libraries.transform(transform);
});

gulpConfig.tasks.browserify.libraries.forEach(function(metaData) {
  if(metaData.path) {
    libraries.require(metaData.path, {
      expose: metaData.name
    });
  } else {
    libraries.require(metaData.name);
  }
});

var libraryStream = libraries.bundle()
.on('error', function(err){
  var message;

  if(err.description)
    message = 'browserify error: ' + err.description + ' when parsing ' + err.fileName + ' | Line ' + err.lineNumber + …

反应0.13.3

我开始使用Browserify来组织我的前端React代码.我也在使用React Developer Tools Chrome扩展程序进行调试.但是,我遇到了一些非常简单的React代码.

var React = require('react/addons');

//React DEV-TOOLS requires React to be on the global scope. Scope is hidden when bundling
window.React = React;

var App = React.createClass({
    render: function(){
        return (
            <div>
               <p>Hello world</p> <!-- Renders fine -->
            </div>
        )
    }
});

React.render(
    <App />,
    document.getElementById('content')
);

以下代码实际上有效,"Hello world"呈现正常.当我在控制台中启动React调试器时,麻烦就开始了.我希望它能说出以下内容:

<Top Level>
    <App>...</App>
</Top Level>

但相反,它只是说:

<Top Level></Top Level>

怎么能<App>不承认他们的阵营devtools呈现？

如何查看使用API​​找到并捆绑的所有文件的列表,就像browserify的--list命令行选项一样？

var browserify = require('browserify');
var b = browserify('main.js').bundle();

运行gulp时出现上述错误.

无法弄清楚为什么.我已经阅读了一些内容,例如gulp.src需要一个./ infront of app.

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

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

gulp.src(['./app/main.js'])
    .pipe(browserify({
        debug: true,
        transform: [ 'reactify' ]
    }))
    .pipe(gulp.dest('./public/'));

});

gulp.task('default', ['scripts']);

像这样......

我已经完成了npm安装,所以节点模块应该是它所在的位置.值得指出的是它在节点模块中称为gulp-browserify.

我在mac上全局安装了browserify.

让我知道您的想法,或者是否有任何信息遗失.

我是新手做出反应并试图将node.js设置为后端并创建一个反应环境.

我正在尝试使用react构建一个应用程序,但它不起作用,我无法理解为什么.所有东西都使用babelify进行编译,但它在性能期间会抛出异常.错误如下:未捕获的ReferenceError:未定义React.

这是我的组件文件(BigCard.jsx):

 export var BigCard = React.createClass({
  render: function() {
    var rows = [];
    for (var variable in this.props.pokemon) {
      if (this.props.pokemon.hasOwnProperty(variable) && variable.toString() !== 'id' && variable.toString !== 'name' && variable.toString !== 'image' && variable.toString !== 'types') {
        rows.push(
          <tr>
            <td class='mdl-data-table__cell--non-numeric'>
              {variable}
            </td>
            <td>
              {this.props.pokemon[variable]}
            </td>
          </tr>
        )
      }
    }
    return (
      <div class='mdl-card mdl-shadow--4dp'>
        <div class='mdl-card__title'>
          <img src={this.props.pokemon.image.src} alt='Pokemon' class='bigCard__img'/>
        </div>
        <h2 class='mdl-card__title-text'></h2>
        <div class='mdl-card__supporting-text'>
          <table class='mdl-data-table mdl-js-data-table'>
            <thead>
              <tr>
                <th class='mdl-data-table__cell--non-numeric'>Type</th>
                <th class='mdl-data-table__cell--non-numeric'>{this.props.pokemon.types}</th>
              </tr>
            </thead>
            <tbody> …

试图让的组合vue.js,Karma以及browserify很好地发挥单元测试.目前我认为我的browserify流程工作不正常.当测试解析我的文件时,它会在第1行报告错误:

17 07 2016 00:40:44.501:ERROR [framework.browserify]: bundle error

./../../../tests/js/site/Validator.spec.js:1
import Validator from './mixins/Validator.js'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我karma.conf.js文件的关键部分如下所示:

preprocessors: {
    './../../../tests/js/**/*.js': ['browserify']
},

browserify: {
    debug: true, // debug=true to generate source maps
    transform: [ ['vueify', {'presets' : ['es2015']}] ]
},

我一直在挖掘,听起来这是由于browserify处理ES6得不好而且它需要预设babel才能做到这一点.任何帮助,将不胜感激.

我是React和Babelify的新手.

我正在使用Node编译一个Web应用程序.现在我这样做:

browserify({debug: true})
.transform(
  babelify.configure({
    comments : false,
    presets  : [ 
      "react",
      "babili",
    ],  
  })  
)   
.require('./app.js', {entry: true})
.plugin(collapse)
.bundle()
.on("error", function (err) {
  console.log("Error:", err.message);
})  
.pipe(fs.createWriteStream(destination));

我的应用程序是一个非常微不足道的"你好,世界!" 关于这个复杂的概念证明:

class Renderer {
  render () {
    ReactDOM.render(
      <div>Hello, World!</div>
      document.querySelector("#react-app")
    );  
  }
}
module.exports = Renderer;

我收到这个警告:

Warning: Accessing PropTypes via the main React package is deprecated, and 
will be removed in  React v16.0. Use the latest available v15.* prop-types
package from npm instead. For info on usage, …