Question

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

通过Grunt执行什么操作在React JSX文件上执行browserify，这些文件需要jquery：

var $ = require('jquery');

在阅读about a similar problem后，尝试将填充变换移动到 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" ]
  }

无法通过浏览器解析一个简单的JavaScript文件（只有＆＃34; var $ = require（＆＃39; jquery＆＃39;）;）来自Grunt。 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"

如果我得到这个工作，那么我认为＆＃34;重新获得＆＃34;可以添加到 package.json 中的转换数组中。

Answer 1

我把＆＃34; retify＆＃34;在 package.json 中的转换段中，并将Grunt browserify重写为：

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

没有＆＃34; dist＆＃34; browserify无法正常运行。

这让垫片工作但是重新运行不会运行，所以我最终切换回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。最后。

浏览器grunt需要jquery

1 个答案: