gruntjs - node - gruñido browserify reacciona requiriendo jquery

instalar browserify

Question

Usando el último nodo y Grunt 0.4.x, reaccione 0.10.x.

Qué a través de Grunt ejecutar browserify en los archivos JSX de React que tienen requiere en jquery en ellos:

var $ = require(''jquery'');

Intenté mover la transformación shim en el paquete.json después de leer sobre un problema similar . Tenga lo siguiente en la parte inferior de mi archivo package.json :

 "browser": {
"jquery": "./bower_components/jquery/jquery.min.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
}

No se puede obtener que exploreify para resolver en un archivo JavaScript simple (con solo "var $ = require (''jquery'');) de Grunt. Gruntfile.js tiene:

browserify: {
options: {
debug: true
},
src: [''src/views/**/*.js''],
dest: ''build/javascript/client.js''
},

Running Grunt da el siguiente error:

Error: module "jquery" not found from "D://development//projects//Prenotes//src//views//dummy.js"

Si esto funciona, entonces supongo que se puede agregar "reactify" a la matriz de transformación en el paquete.json .

Answer 1

Puse "reactify" en mi segmento de transformación en el paquete.json y redividé el Grunt browserify como:

browserify: {
dist: {
files: {
''build/bundle.js'' : [''src/views/**/*.jsx'']
}
}
},

Sin el navegador "dist" no se ejecutaría correctamente.

Esto hizo funcionar el shim pero la reacción no se pudo ejecutar, así que terminé cambiando a grunt-react plus y retiré la lógica de transformación al Gruntfile.js (que se siente mejor).

Entonces, al final del paquete .json hay:

 "browser": {
"jquery": "./lib/jquery/jquery.js",
"bootstrap": "./lib/bootstrap/bootstrap.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
}

y en el Gruntfile.js :

browserify: {
options: {
debug: true,
transform: [''browserify-shim'', require(''grunt-react'').browserify]
},
dist: {
files: {
''build/bundle.js'' : [''src/views/**/*.jsx'']
}
}
},

Esto calza y procesa el JSX. Finalmente.