关于gruntjs：grunt browserify反应需要jquery


grunt browserify react requiring jquery

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

要通过Grunt执行的操作是在其中需要jquery的React JSX文件上执行browserify：

1
var $ = require('jquery');

在阅读了类似问题后，尝试将shim转换移动到package.json中。在我的package.json文件底部具有以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 "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" ]
  }

无法通过Gruntfile.js将其浏览器解析为简单的JavaScript文件(仅带有" var $ = require(\\'jquery \\');)。Gruntfile.js具有：

1
2
3
4
5
6
7
8
browserify: {
  options: {
    debug: true
  },

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

运行咕unt声给出以下错误：

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

如果并且当我开始工作时，我假设可以将" reactify "添加到package.json中的转换数组中。

我在package.json的转换段中放入了" reactify"，并将Grunt浏览器重新标识为：

1
2
3
4
5
6
7
browserify: {
  dist: {
    files: {
      'build/bundle.js' : ['src/views/**/*.jsx']
     }
  }
},

没有" dist"浏览器的浏览器将无法正常运行。

这可以使垫片起作用，但无法运行reactify，所以我最终切换回grunt-react，然后将转换逻辑拉回到Gruntfile.js(感觉更好)。

因此在package.json的末尾有：

1
2
3
4
5
6
7
8
9
10
11
12
13
 "browser": {
   "jquery":"./lib/jquery/jquery.js",
   "bootstrap":"./lib/bootstrap/bootstrap.js"
  },
 "browserify-shim": {
   "jquery": {
     "exports":"$"
    },
   "bootstrap": {
     "exports":"bootstrap",
     "depends": ["jquery:$" ]
    }
  }

并在Gruntfile.js中：

1
2
3
4
5
6
7
8
9
10
11
browserify: {
  options: {
    debug: true,
    transform: ['browserify-shim', require('grunt-react').browserify]
  },
  dist: {
    files: {
      'build/bundle.js' : ['src/views/**/*.jsx']
    }
  }
},

这既填充并处理了JSX。最后。