ruby on rails - babelify+browserify-rails+reaccion, Uncaught SyntaxError: importación de token inesperada

ruby-on-rails reactjs

Question

Estoy usando browserify-rails + babelify para transpile jsx en un proyecto de reaccion + rails.

Estoy muy desconcertado por qué // require(''''); es necesario en components.js (que es el punto de montaje de la reacción) para que funcione la transpilación jsx.

Si borro la línea de comentario // require(''''); , Obtendría "SyntaxError: Importación inesperada de token"

Actualmente no tengo pistas, ¿por qué una línea de comentarios afectaría la transpilación? También estoy desconcertado acerca de si este es un problema de reacción, babelify, browserify, browserify-rails o rails asset pipeline.

Consulte https://github.com/sidazhou/react_rails_skeleton/tree/v0.0.1 para obtener la base del código completo

componentes.js

// require(''''); // somehow this is necessary, why?! Otherwise we get: "SyntaxError: Unexpected token import"
import React from ''react'';
import ReactDOM from ''react-dom'';
import Widgets from ''./components/Widgets.jsx'';

ReactDOM.render( <Widgets />, document.getElementById(''react_component'') );

paquete.json

{
  "name": "react-sample",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-incremental": "^3.0.1",
    "history": "^1.13.1",
    "material-ui": "^0.13.4",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.2",
    "react-tap-event-plugin": "^0.2.1"
  },
  "engines": {
    "node": ">= 0.10"
  }
}

aplicacion.rb

config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]"

Answer 1

Hay un problema abierto para browserify-rails sobre eso:

Las transformaciones # 124 solo se aplican a los archivos cargados con require() .

Estoy tratando de resumir el hilo citando algunas de las publicaciones de cymen que creo que son relevantes (él es el autor de browserify-rails).

_{Cymen comentó el 10 de diciembre de 2015:}

Un truco para intentar depurarlo es poner un comentario en su fuente que es // require o // module.exports . ¿Eso lo resuelve? Por supuesto, nos gustaría agregar una solución adecuada para detectar es6 (importar, etc.).

_{cymen comentó el 18 dic 2015}

Después de volver a leer su publicación inicial, la solución simple es simplemente que application.js requiera la aplicación y la inicie, simplemente no use ES6 ni nada en ella. Eso te llevará a donde quieras sin perder mucho tiempo. Más adelante, cuando esté fuera del flujo de activos (idealmente), tendrá más control sobre la compilación y podrá refactorizarlo nuevamente en el archivo principal si eso es lo que desea. Pero ¿por qué luchar contra un problema tan menor?

_{mockdeep ^{(abrió el número)} comentó el 18 de diciembre de 2015:}

Sí, estamos haciendo eso. Acabamos de tener un par de globales definidos en application.js en este punto. Es solo un problema sorprendente, y no necesariamente aparecerá en la superficie si realiza pruebas en Chrome o Firefox, ya que ambos admiten un montón de características de ES6.

¿Por qué querríamos salir del flujo de activos, sin embargo? Parece que proporciona un valor bastante sólido en términos de precompilación de activos.

_{Cymen comentó el 18 de diciembre de 2015:}

Porque la cartera de activos se está convirtiendo en un anti-patrón. La única razón por la que browserify-rails existe es porque el flujo de activos mantiene el desarrollo de JavaScript alrededor de -5 o más años de las mejores prácticas actuales. Mientras que browserify-rails funcionará, en cierto punto, es mucho más fácil ir directamente a browserify o webpack.

Por lo tanto, mi perspectiva es que browserify-rails es mejor migrar de JavaScript heredado a CommonJS y luego saltar del flujo de activos.

Pero todos son libres de usarlo como les parezca, por supuesto. Hay algún beneficio al conectar una actualización de página a una compilación de activos. Para los desarrolladores de Ruby que solían trabajar con Rails, ese simple "así es como funciona" tiene sentido. Aunque con un Procfile, no es difícil dar inicio al paquete web / browserify viendo los activos y recompilando según sea necesario. Así que entiendo que hay una variedad de casos de uso.

_{Cymen comentó el 18 de diciembre de 2015:}

Cambié de empleador y ahora estoy usando el paquete web directamente (lo que me gusta: un ingeniero anterior hizo esa elección y está funcionando bien, creo que browserify también es bueno). Pero estoy trabajando en aplicaciones web del lado del cliente, por lo que nuestro backend es típicamente API basadas en Ruby que ejecutan Sinatra (con NodeJS para hacer alguna representación del lado del servicio).

Mi empleador anterior estuvo usando browserify-rails por un tiempo, pero creo que se han salido del flujo de activos. No estoy seguro (todavía no he tenido la oportunidad de hablar en detalle con los que todavía están trabajando en ese proyecto).

Uno de los problemas fue cuando el tiempo para ejecutar browserify-rails se estaba demorando, especialmente en los MacBooks de gama baja (Airs, más viejo 13). Con browserify-rails 2.x, creo que tenemos muchas más posibilidades de mantener un alto rendimiento si podemos solucionar los problemas con el uso de Sprockets directamente en lugar de usar Tilt como intermediario (como lo hacemos en browserify-rails 1.x) . De hecho, el almacenamiento en caché de Sprockets debería ser lo suficientemente bueno como para que podamos deshacernos de browserify-incremental (que es el almacenamiento en caché de las configuraciones de browserify para tratar de mantener el rendimiento alto, pero ahora con 2.x tenemos el almacenamiento en caché en Sprockets y el almacenamiento en caché en browserify- incremental que es probablemente demasiado complejo).

Ese fue su último comentario sobre el tema (hace 3 meses). Entonces, la solución que ya tiene es la mejor solución disponible en este momento (hasta que alguien implemente la detección de ES6 en browserify-rails).