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.