Compiling multiple files

[whoisearth]

See the following SO I created -

http://stackoverflow.com/questions/34422391/uncaught-referenceerror-parent-is-not-defined

I'm unable to add multiple personal project JS files with inheritance as it doesn't seem to compile or recognize their existance. Full Pipeline settings are here -

# Django Pipeline (and browserify)
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'

STATICFILES_FINDERS = (  
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'pipeline.finders.PipelineFinder',
)

# browserify-specific
PIPELINE_COMPILERS = (  
    'pipeline_browserify.compiler.BrowserifyCompiler',
)

PIPELINE_CSS_COMPRESSOR = 'pipeline.compressors.NoopCompressor'  
PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.uglifyjs.UglifyJSCompressor'

if DEBUG:  
    PIPELINE_BROWSERIFY_ARGUMENTS = '-t [ reactify ]'

PIPELINE_CSS = {  
    'build_css': {
        'source_filenames': (
            'css/build_styles.css',
            'bootstrap/css/bootstrap.css',
            'fontawesome/css/font-awesome.css',
            'datatables/css/dataTables.bootstrap.css',
        ),
        'output_filename': 'css/build_css.css',
    },
}

PIPELINE_JS = {  
    'build_js': {
        'source_filenames': (
            'js/bower_components/jquery/dist/jquery.js',
            'bootstrap/js/bootstrap.js',
            'js/bower_components/react/react-with-addons.js',
            'js/bower_components/react/react-dom.js',
            'datatables/js/jquery.dataTables.js',
            'datatables/js/dataTables.bootstrap.js',
            'js/node_modules/marked/marked.min.js',
            'js/node_modules/react-router/umd/ReactRouter.js',
            'js/parent.js',
            'js/child.js',
            'js/build.browserify.js',
        ),
        'output_filename': 'js/build_js.js',
    }
}

[j0hnsmith]

PIPELINE['build_js']['source_filenames'] should only contain 1 file, the 'entrypoint' (probably js/build.browserify.js). That file should require other files as necessary.

Your build.browserify.js may look like

var parent = require('parent');

// do something with parent
...

and parent.js may look like

var child = require('child');

// do something with child

An then browserify will recursively include all the required files as it encounters them.

If the browserified output file depends on some globals from other files, such as jquery, you probably want something like this

PIPELINE_JS = {  
    'dependencies': {
        'source_filenames': (
            'js/bower_components/jquery/dist/jquery.js',
            'bootstrap/js/bootstrap.js',
            'js/bower_components/react/react-with-addons.js',
            'js/bower_components/react/react-dom.js',
            'datatables/js/jquery.dataTables.js',
            'datatables/js/dataTables.bootstrap.js',
            'js/node_modules/marked/marked.min.js',
            'js/node_modules/react-router/umd/ReactRouter.js',
        ),
        'output_filename': 'js/dependencies.js',
    },
    'build_js': {
        'source_filenames': (
            'js/build.browserify.js',
        ),
        'output_filename': 'js/build_js.js',
    }
}

If you're having difficulties with browserify itself, you should try running browserify js/build.browserify.js -o js/build_js.js.

[whoisearth]

I've removed "child" for the sake of simplicity of making it just referencing between 2 javascript files.

Looks like the problem is actually an issue with reactify. I'm using reactify because browserify doesn't work (couldn't figure it out). I actually run the following from the command line -

browserify -t reactify build.browserify.js and it generates the file but states it cannot find a module -

(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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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 Parent = require('./parent');

ReactDOM.render(
    React.createElement(Parent, null), 
    document.getElementById('content')
);

},{"./parent":2}],2:[function(require,module,exports){
var Parent = React.createClass({
  displayName: 'Parent',
  render: function(){
    return (
      React.createElement("div", null, 
        React.createElement("div", null, " This is the parent. ")
      )
    )
  }
});

},{}]},{},[1]);

This is what's in my build.browserify.js

var Parent = require('./parent');

ReactDOM.render(
    <Parent />, 
    document.getElementById('content')
);

parent.js

var Parent = React.createClass({
  displayName: 'Parent',
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
      </div>
    )
  }
});

update - reading more into reactify and I'm guessing the underlying issue is due to a difference between js and jsx syntax?

I "should" be doing browserify -t reactify build.browserify.js -o build_js.js but the problem as stated above is it's not referencing the module_deps correctly?

[j0hnsmith]

I think you need to add module.exports = Parent; at the bottom of parent.js as currently it's not exporting anything.

[whoisearth]

the modules needed to be incorporated by doing the following in my build.browserify.js -

var SubApp= require("./components/SubApp");

And then in the SubApp.js I had to do the following -

module.exports = {
    Component1: Component1
}

Then it could be called in my build.browserify.js like so -

ReactDOM.render(
   <SubApp.Component1 />,
    document.getElementById('content')
);