Estoy usando gem 'browserify-rails'
para traer modulos de NPM al project
En el package.json estoy importando react, browserify, y babelify con presets para es2015 y react:
{
"dependencies": {
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify": "^13.1.0",
"browserify-incremental": "^3.1.1",
"react": "^15.3.1",
"react-dom": "^15.3.1"
},
"devDependencies": {}
}
Los estoy incluyendo en dependencies y no en devDependencies porque heroku los necesita para poder hacer el compilation
En el application.rb estoy configurando browserify de esta manera:
config.browserify_rails.commandline_options = "-t babelify"
config.browserify_rails.source_map_environments << 'development'
El application.js:
// = require react_ujs
// = require js-routes
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
window.$ = window.jQuery = global.$ = require('jquery');
global.ReactTestUtils = require('react-addons-test-utils');
require('jquery-ujs');
require('moment-duration-format');
require('moment-timezone');
require('bootstrap-datepicker');
require('./main');
require('./components');
En el components.js estoy asignando los components directamente a window:
window.Timer = require('./components/timer');
window.Invoice = require('./components/invoice');
window.DenboraChart = require('./components/denbora-chart');
window.DatePicker = require('./components/datepicker');
window.TimeZoneInput = require('./components/timezoneinput');
window.DateRangePicker = require('./components/daterangepicker');
window.InvoiceCalculations = require('./components/invoicecalculations');
window.InvoiceItems = require('./components/invoiceitems');
window.TimeEditor = require('./components/timeeditor');
window.TimeEntriesList = require('./components/timeentrieslist');
window.TimeEntryBulkModal = require('./components/timeentrybulkmodal');
window.TimeEntryGroup = require('./components/timeentrygroup');
window.TimerCounter = require('./components/timercounter');
window.TimeEntry = require('./components/timeentry');
window.TimeFormatHelper = require('./helpers/timeformathelper');
Esta parte no me cuadra para nada, pero utilizando //= require_tree ./components
el helper de rails no consigue los componentes
Y a los componentes les agregué module.exports = Component
para exportarlos.