Browserify require imperavi redactor

Question

I want to require code of imperavi's redactor ( npm package ) to my browserify build. But I get an unpredictable error.

This is the code of react's element

React = require('react')
ReactBootstrap = require('react-bootstrap')

Input = ReactBootstrap.Input
Button = ReactBootstrap.Button

require('bower-redactor/redactor/redactor-plugins/table.js')
require('bower-redactor/redactor/redactor.js')
require('bower-redactor/redactor/langs/ru.js')

module.exports = React.createClass
  componentDidMount: ->
    jQuery('textarea.redactor').redactor
      lang: 'ru'
      plugins: ['table']
  render: ->
    <form>
      ...
      <Input type='textarea' ref='content' className='redactor' defaultValue={@props.content} />
      ...
    </form>

All is going well until I require('bower-redactor/redactor/redactor-plugins/table.js') and add plugins: ['table'] to the code. I get an error: ReferenceError: RedactorPlugins is not defined at redactor.js#L1430

But they are defined at table.js , which is required before redactor.js Why do I get this error. How can I avoid it and start to successfully use redactor.js?

I've tried a lot of things: browserify-shim package , making global.RedactorPlugins = {} and so on, but without success.

Answer 1

You need to include the code in your bundle. It will be global so you just reference it. Require won't work. With gulp it would look something like this;

    var source = {
        libjs: ['bower-redactor/redactor/redactor-plugins/table.js', 'bower-redactor/redactor/redactor.js', 'bower-redactor/redactor/langs/ru.js']
    };

    gulp.task('libjs', function () {
        gulp.src(source.libjs)
            .pipe(concat('lib.min.js'))
            .pipe(gulp.dest('./ui-dist'))
    });