标签: grunt-browserify

我正在运行Chrome 48.0,最近当我尝试在开发者控制台中放置断点时,有时他们会拒绝放置在某些行,而是跳转到另一行.几乎就像当你试图在一条没有意义的线上放置一个断点(比如一个支架本身),但这些只是常规线.如果我对我的代码进行了更改,那么拒绝工作的行可能会发生变化,之前工作的行可能会停止工作.

我假设这与源映射有关,但我很困惑为什么有些行正常工作,并且它之后的行不会.

我正在使用grunt-browserify与babelify和babel-preset-react,babel-preset-es2015和babel-plugin-syntax-object-rest-spread:

    options: {
      transform: [['babelify', {
        presets: ['react', 'es2015'],
        plugins: ['syntax-object-rest-spread'],
      }]],
      browserifyOptions: {
        extensions: ['.jsx'],
        paths: [absPath + '/js', absPath],
        debug: true // Adds source maps to output
      },

知道可能会发生什么吗？

我想生成jsx文件的源图,这些文件是用babelify和browserify编译的.似乎某些源图在我的输出文件底部被生成为base64编码的注释,但是堆栈跟踪不支持它们.

我的grunt任务如下所示:

browserify: {
  options: {
    browserifyOptions: {
      debug: true
    },
    debug: true,
    transform: ['babelify']
  },
  app: {
    src: 'src/app.jsx',
    dest: 'dist/app.js'
  }
},

我正在使用Browserify和Grunt捆绑我们的RendrJS webapp.我想分析捆绑包,看看它包含哪些模块,看看是否有任何代码是多余的.这可能发生,因为在Rendr中,某些js代码可能只在服务器上运行.

如何获取捆绑包的内容列表.我试过了:

browserifyOptions: { 'list': true }

但它似乎没有任何影响.我们正在使用Browserify 2.

我正在尝试捆绑我自己的代码(A),后者又使用2个第三方组件(B和C),其中C也需要B.据我所知,所有内容都是使用CommonJS节点样式模块编写的.

捆绑时自己出现在60K.

B是单独包含的,并假设是全局的,我已经通过在我的构建步骤中执行一个替换的脏点来完成这项工作,并且需要("B")使用global.B

C是什么导致了我的问题,它的意思是"只有8K"的大小但是当我尝试用A捆绑它时我的捆绑跳跃到600K +,因为我认为它依赖于大量的依赖？

这是不能接受的,但我不知道如何得到它的任何小,因为我不知道究竟发生了什么的拉动(或更重要的是什么,我可以排除,使其仍然有效).我可以尝试使用驱逐器的二进制印章,但我不知道这是否是一种安全的方式,甚至是明智的方式来做到这一点.

我怎么可以捆绑至最高,只有我已经在捆绑68.5K(代码60K + 8.5K两个区块的总规模)出来,当然还可以使用？

我是新来的节点,并browserify但我一直在敲打这一个多星期,以便公平地说,我已经给它一个很好的刺把我的手之前.

如果重要的其他信息:

• 它需要运行服务器端和客户端
• B实际上是ReactJS
• C实际上是React Router Component
• 通过ReactJS.net使用windows和c#...嘿......等等......回来...... 风滚草

我有一个配置为如下的browserify任务：

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: ['reactify']
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

我尝试将其配置为以这种方式使用es6：

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: ['reactify', {'es6': true}]
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

但是，这将导致错误：

错误：路径必须是字符串

鉴于我不想在package.json中配置转换，因此我无法从文档中了解如何执行此操作。任何帮助，将不胜感激。

我正在尝试使用Grunt-browserify并重新解析来解析和捆绑用jsx编写的React组件.我想使用扩展标志,以便我不必指定我的模块的文件扩展名,但我无法让它工作.这是一些测试代码:

一个Gruntfile:

'use strict';
module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        browserify: {
            dev: {
                src: 'src/app.jsx',
                dest: 'dest/app.js',
                options: {
                    debug: true,
                    transform: ['reactify'],
                    extensions: ['.jsx']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-browserify');

    grunt.registerTask('default', ['browserify:dev']);

};

主app文件app.jsx:

'use strict';
var React = require('react');
var Test = require('./components/Test');   // Here is the problem... 

React.render(
    <Test />,
    document.getElementById('test')
);

然后Test.jsx:

'use strict';
var React = require('react');

var Test = React.createClass({

    render: function() {
        return(
            <div>
            <p>Some markup</p>
            </div>
        ); …