브라우저가 실행되는 스크립트가 실행되지 않습니다

Question

내가 작성한 자바 스크립트는 브라우저 릿을 통해 컴파일 한 후 웹 페이지에 아무런 영향을 미치지 않습니다. 심지어 console.log 문도 작동하지 않지만 의미있는 오류는보고하지 않습니다. 내 자바 스크립트에서, 심지어 내가 그것을 소개합니다. 나는이처럼 보이는 Gruntfile.js 있습니다 : 그것은 socket.io 소요 라이브러리 반응, 하나 개의 파일, lib 디렉토리/libs.js로를 browserifies 그것이 무엇이며 기본적으로

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' 
     } 
    } 
    }); 
}; 

을하고, 내 main.js 파일을 가져 와서 socket.io로 컴파일 속도를위한 외부 라이브러리로 정의 된 반응을하고 reactify 필터 (JSX 파일)를 통해 압축 한 다음 축소하여 프론트 엔드/lib/main.js에 저장합니다. .

main.js 파일은 매우 간단합니다. 지금은 두 개의 테스트 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가 오류없이 실행하고 나는 프론트 엔드/libs와/main.js를 읽고, 제대로 축소 된 및 reactified입니다.

/** @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') 
); 

그리고 컴파일 된 버전 :

(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]) 

내가 난처한 상황에 빠진거야, 바라건대 너희들이 나를 도울 수

여기에 원래 main.js 파일이 있습니다. 더 많은 정보를 원한다면, 나는 그것을 기꺼이 제공 할 것이다.

Answer 1

대신 require('socket.io-client')을 작성해야합니다. 내 실수.