grunt browserify react requiring jquery

Using latest node and Grunt 0.4.x, react 0.10.x

What to via Grunt execute browserify on React JSX files that have requires on jquery in them:

var $ = require('jquery');

Tried moving the shim transformation into the package.json after reading about a similar problem. Have the following at the bottom of my package.json file:

  "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" ]
  }

Can't get it browserify to resolve on a simple JavaScript file (with just "var $ = require('jquery');) from Grunt. Gruntfile.js has:

browserify: {
  options: {
    debug: true
  },

  src: ['src/views/**/*.js'],
  dest: 'build/javascript/client.js'
},

Running Grunt gives the following error:

Error: module "jquery" not found from "D:developmentprojectsPrenotessrcviewsdummy.js"

If and when I get this working then I assume "reactify" can be added to the transform array in the package.json .

---

I put "reactify" in my transform segment in the package.json and redid the Grunt browserify as:

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

Without the "dist" browserify wouldn't run properly.

This got the shim to work but reactify wouldn't run, so I ended up switching back to grunt-react plus pulled the transform logic back into the Gruntfile.js (which just feels better).

So at the end of the package.json there is:

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

and in the Gruntfile.js :

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

This both shims and processes the JSX. Finally.

链接地址: http://www.djcxy.com/p/52100.html

上一篇: 在客户端上执行jsx转换

下一篇: grunt browserify反应需要jquery