The javascript I write, after it is compiled using browserify through grunt, has no effect on the webpage whatsoever -- even console.log statements don't work, but it also reports no meaningful error in my javascript, even when I introduce it. I have a Gruntfile.js that looks like this:
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'
}
}
});
};
Basically, what it does is it takes the socket.io and React libraries, and browserifies them into one file, lib/libs.js, and it take my main.js file and, with socket.io and react defined as external libraries for compilation speed, puts that through the reactify filter (it's a JSX file), minifies it, and then puts it into frontend/lib/main.js.
The main.js file is very simple, right now it has a couple test console.log
statements, but none of these are showing up in the console, so I am stumped to how to make it work. All the console logs is:
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
The Gruntfile runs with no errors, and I can read the frontend/libs/main.js, and it's properly minified and reactified.
Here's the main.js file, original:
/** @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')
);
And the compiled version:
(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])
I'm stumped, hopefully you guys can help me out. If you want more information, I would be happy to provide it.
I should have done require('socket.io-client')
instead. My mistake.