grunt browserify react requiring jquery

Question

使用最新的节点和Grunt 0.4。X，反应0.10.x

如何通过Grunt在需要jquery的React JSX文件上执行browserify:

var $ = require('jquery');

尝试将垫片转换移动到包中。json在阅读了类似的问题后。在我的包的底部放置以下代码。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" ]
  }

无法从Grunt获得简单的JavaScript文件(仅使用"var $ = require('jquery');)")。 Gruntfile.js :

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

运行Grunt给出以下错误:

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

如果和当我得到这个工作，那么我假设"reactify"可以添加到转换数组在package.json.

Answer 1

我把"reactify"放在包的转换段中。json，并将Grunt浏览器修改为:

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

如果没有"dist"， browserify将无法正常运行。

这让shim工作，但reactify不会运行，所以我最终切换回grunt-react加上拉转换逻辑回到Gruntfile.js(这只是感觉更好)。

所以在包的末尾。json有:

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

和Gruntfile.js:

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

这对JSX进行垫片和处理。最后。