Javascript 我的浏览器化脚本赢得了';跑不动

Javascript 我的浏览器化脚本赢得了';跑不动,javascript,node.js,gruntjs,browserify,react-jsx,Javascript,Node.js,Gruntjs,Browserify,React Jsx,我编写的javascript在通过grunt使用browserify编译后,对网页没有任何影响——即使console.log语句也不起作用,但它也不会在我的javascript中报告任何有意义的错误,即使在我引入它时也是如此。 我有一个Gruntfile.js,看起来像这样: module.exports = function(grunt) { //load plugins grunt.loadNpmTasks('grunt-browserify'); grunt.loadNpmT

我编写的javascript在通过grunt使用browserify编译后,对网页没有任何影响——即使console.log语句也不起作用,但它也不会在我的javascript中报告任何有意义的错误,即使在我引入它时也是如此。 我有一个Gruntfile.js,看起来像这样:

module.exports = function(grunt) {

  //load plugins
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-clean');

  //define tasks
  grunt.registerTask('default', ['all']);
  grunt.registerTask('all', ['clean', 'browserify:libs', 'browserify:app']);
  grunt.registerTask('server', ['all', 'watch:fast']);

  grunt.initConfig({
    //Watch the main.js file for changes
    watch: {
      fast: {
        files: 'src/frontend/main.js',
        tasks: ['browserify:app'],
        options: {
          livereload: true,
          nospawn: true
        }
      }
    },

    //Clean up any previous build artifacts
    clean: {
      build: ['/frontend/lib/*']
    },

    //Bundle stuff
    browserify: {
      options: {
        transform: [ ['reactify', {}], ['uglifyify', { 'global': true }] ]
        //bundleOptions: { 'debug': true } //for source map
      },
      //put all the libs into one file
      libs: {
        options: {
          require: ['socket.io', 'react']
        },
        src: "src/frontend/dummy_libs.js",
        dest: 'frontend/lib/libs.js'
      },
      //Compile the main.js file
      app: {
        options: {
          external: [
            'socket.io',
            'react'
          ]
        },
        src: 'src/frontend/main.js',
        dest: 'frontend/lib/main.js'
      }
    }
  });
};
基本上,它所做的是将socket.io和React库浏览成一个文件lib/libs.js,然后将我的main.js文件,并将socket.io和React定义为外部库以提高编译速度,通过reactify过滤器(它是一个JSX文件)将其缩小,然后将其放入frontend/lib/main.js

main.js文件非常简单,现在它有几个test
console.log
语句,但是这些语句都没有出现在控制台中,所以我很难理解如何使它工作。所有控制台日志都是:

GET http://localhost:8000/ [HTTP/1.1 304 Not Modified 2ms]
Use of getUserData() or setUserData() is deprecated.  Use WeakMap or element.dataset instead. requestNotifier.js:63
GET http://localhost:8000/lib/libs.js [HTTP/1.1 304 Not Modified 1ms]
GET http://localhost:8000/lib/main.js [HTTP/1.1 304 Not Modified 1ms]
TypeError: mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create libs.js:858
TypeError: require.resolve is not a function libs.js:826
Gruntfile运行时没有错误,我可以读取frontend/libs/main.js,并且它被适当地缩小和反应

以下是main.js文件,原件:

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

socket.on('depth:value', function(data) {console.log(data);});
socket.emit('test', 'was this sent succesfully?');
console.log('Test');
console.log('Test2');
console.log('Test3');

var Depth = React.createClass({
  getInitialState: function() {
    socket.on('depth:value', this.newDepthValue);
    return { depth: 0 };
  },
  newDepthValue: function(data) {
    this.setState({ depth: data.depth });
    console.log('new state: { depth: ' + data.depth + ' }');
  },
  render: function() {
    return (
      <div>Depth: {this.state.depth}</div>
    );
  }
});

React.renderComponent(
  <Depth />,
  document.getElementById('depth')
);
/**@jsx React.DOM*/
var React=要求('React');
var socket=require('socket.io')();
on('depth:value',函数(数据){console.log(数据);});
socket.emit('test','this sented successfully?');
console.log('Test');
log('Test2');
log('Test3');
var Depth=React.createClass({
getInitialState:函数(){
socket.on('depth:value',this.newDepthValue);
返回{depth:0};
},
newDepthValue:函数(数据){
this.setState({depth:data.depth});
log('newstate:{depth:'+data.depth+'}');
},
render:function(){
返回(
深度:{this.state.Depth}
);
}
});
React.renderComponent(
,
document.getElementById('depth')
);
以及经汇编的版本:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var React=require("react"),socket=require("socket.io")();socket.on("depth:value",function(e){console.log(e)}),socket.emit("test","was this sent succesfully?"),console.log("Test"),console.log("Test2"),console.log("Test3");var Depth=React.createClass({displayName:"Depth",getInitialState:function(){return socket.on("depth:value",this.newDepthValue),{depth:0}},newDepthValue:function(e){this.setState({depth:e.depth}),console.log("new state: { depth: "+e.depth+" }")},render:function(){return React.DOM.div(null,"Depth: ",this.state.depth)}});React.renderComponent(Depth(null),document.getElementById("depth"));
//# sourceMappingURL=out.js.map

},{"react":"M6d2gk","socket.io":"KTyLuN"}]},{},[1])

代码>(函数e(t,n,n,r)的(函数e(t,t,n,n,r)的(函数e(t,t,n,n,r)的(函数e(t,t,t,n,n,r)的(t,t,n,n,r)的(函数e)的(t,t,n,n,r)若若(t,t,t,t,(t,t,t,t(t,t,t,t,t,t,t,t,t(t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t)的)的)需要的==“函数”和&require;for(var o=0;o我应该做
require('socket.io客户端')
而不是我的错误。

我应该做
require('socket.io客户端')
而不是我的错误。

我应该做
require('socket.io客户端')
而不是我的错误。

我应该做
require('socket.io客户端'))
相反,我错了