javascript require in browser

Question

So I am working on a react single page app which won't run via node. I want to serve the webpage using python but for nearly all modules I can find they use 'require' to include other modules. Is there anyway for me to painlessly either rewrite the existing requires to something that is understood by the browser or use them directly?

for instance I want to use this: https://github.com/STRML/react-resizable

but I cannot figure out how to get it to work in my browser...

Answer 1

You should take a look at Webpack. It only takes a webpack.config.js that is pretty simple and then you're good to go.

var webpack = require('webpack');  
module.exports = {  
  entry: [
    'webpack/hot/only-dev-server',
    "./src/index.js"
  ],

  output: {
    path: __dirname + '/build',
    filename: "app.js"
  },

  devtool: 'sourcemap',

  jshint: {
    esnext: true
  },

  module: {

    preLoaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }],

    loaders: [
      { 
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      },
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          stage: 1
        }
      },
      { 
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      { 
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      { 
        test: /\.(png|jpg|woff)$/,
        loader: "url-loader?limit=100000"
      }, 
      { 
        test: /\.jpg$/,
        loader: "file-loader"
      }
    ]
  },

  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

In this example webpack will get my index.js (called entrypoint) and resolve every require down its path. The output file will be app.js thrown at /build folder.

The loaders are a bonus so Webpack can do some other fancy stuff!

Answer 2

As stated in the comments, Browserify is an excellent tool to help you use CommonJS modules for Javascript that runs in a browser. It looks like you ran into some issues with it not understanding your JSX code. You will need to transform your JSX code into valid Javascript for Browserify to function properly. I'll give you a gulp task that automate this whole process for you.

First, install the required modules:

npm install gulp-uglify vinyl-source-stream browserify reactify gulp-streamify --save-dev

and

npm install -g gulp-cli

Next, create your Gulpfile.js and throw this into it:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries   : 'path/to/mainComponent.js', //where your main component lives
        transform : [reactify] //transform jsx
    })
        .bundle()
        .pipe(source('bundle.js')) //create file named 'bundle.js'
        .pipe(streamify(uglify('bundle.js'))) //minify
        .pipe(gulp.dest('path/to/destination')); //where you want your 'bundle.js' to be placed
});

You will obviously need to change the entry path and destination path to match the needs of your project. You can optionally rename the bundle file if you don't want it to be called "bundle.js"

Once that is done, simply type gulp build and your bundled Javascript will be created for you.