Skip to content

Instantly share code, notes, and snippets.

@carlows
Created August 25, 2016 23:05
Show Gist options
  • Save carlows/6f115c2f0d7e5add9eae63ed5b2faf91 to your computer and use it in GitHub Desktop.
Save carlows/6f115c2f0d7e5add9eae63ed5b2faf91 to your computer and use it in GitHub Desktop.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment