grunt browserify 反应需要 jquery答案

【问题标题】：grunt browserify react requiring jquerygrunt browserify 反应需要 jquery
【发布时间】：2014-06-04 13:35:26
【问题描述】：

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

通过 Grunt 对需要 jquery 的 React JSX 文件执行 browserify：

var $ = require('jquery');

在阅读about a similar problem 后，尝试将 shim 转换移动到 package.json。在我的 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" ]
  }

无法通过浏览器化解析来自 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 中的转换数组中。

【问题讨论】：

标签： gruntjs reactjs browserify browserify-shim

【解决方案1】：

我将“reactify”放在 package.json 的转换段中，并将 Grunt browserify 重新设置为：

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

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

这让 shim 开始工作，但 reactify 无法运行，所以我最终切换回 grunt-react 并将转换逻辑拉回 Gruntfile.js（感觉更好） .

所以在 package.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。最后。

【讨论】：