我有一个基本的 ReactJS 应用程序。我使用 webpack 并且想使用 Bower 的模块。我安装了bower-webpack-plugin并在bower中添加jquery库。

webpack.config.js

var BowerWebpackPlugin = require("bower-webpack-plugin"); 
var webpack = require("webpack"); 
 
module.exports = { 
    entry: './index.jsx', 
    output: { 
        filename: 'bundle.js', 
        publicPath: 'http://localhost:8090/assets' 
    }, 
    module: { 
        loaders: [ 
            { 
                //tell webpack to use jsx-loader for all *.jsx files 
                test: /\.jsx$/, 
                loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
            } 
        ] 
    }, 
    plugins: [ 
        new BowerWebpackPlugin(), 
        new webpack.ProvidePlugin({ 
            $: 'jquery', 
        }) 
    ], 
    externals: { 
        //don't bundle the 'react' npm package with our bundle.js 
        //but get it from a global 'React' variable 
        'react': 'React' 
    }, 
    resolve: { 
        extensions: ['', '.js', '.jsx'], 
        alias: { 
            jquery: "./bower_components/jquery/dist/jquery.js" 
        } 
    } 
} 

编辑:现在我正在使用 this webpack config有 Bower 依赖项但没有 Bower-webpack-plugin

bower.json

{ 
  "name": "jquery", 
  "version": "2.1.4", 
  "main": "dist/jquery.js", 
  "license": "MIT", 
  "ignore": [ 
    "**/.*", 
    "build", 
    "dist/cdn", 
    "speed", 
    "test", 
    "*.md", 
    "AUTHORS.txt", 
    "Gruntfile.js", 
    "package.json" 
  ], 
  "devDependencies": { 
    "sizzle": "2.1.1-jquery.2.1.2", 
    "requirejs": "2.1.10", 
    "qunit": "1.14.0", 
    "sinon": "1.8.1" 
  }, 
  "keywords": [ 
    "jquery", 
    "javascript", 
    "library" 
  ] 
} 

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Basic Property Grid</title> 
    <!-- include react --> 
    <script src="./node_modules/react/dist/react-with-addons.js"></script> 
</head> 
<body> 
    <div id="content"> 
        <!-- this is where the root react component will get rendered --> 
    </div> 
    <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change --> 
    <!-- we'll run the webpack dev server on port 8090, so make sure it is correct --> 
    <script src="http://localhost:8090/webpack-dev-server.js"></script> 
    <!-- include the bundle that contains all our scripts, produced by webpack --> 
    <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 --> 
    <script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script> 
 
    <script type="text/javascript"> 
 
$(document).ready(function(){ 
 $("body").append("This is Hello World by JQuery"); 
}); 
 
</script> 
 
</body> 
</html> 

当我打开主页时，收到错误消息:“$ 未定义”。

项目结构

请您参考如下方法:

首先，也许您只是忘记了，但可以肯定的是，我想指出您似乎在问题中向我们展示了 jquery bower.json 文件。 您的项目实际上似乎在其根目录下没有 bower.json 文件。

如果您想使用 Bower 来管理依赖项，请确保您有一个 bower.json，方法是在项目根目录运行 bower init，然后运行实例bower install --save jquery。

参见the bower doc了解更多信息;)

除此之外，问题是您尝试在 index.html 中使用 jQuery，而不是在 webpack 管理的模块中。
Webpack 实际上并未处理您的 index.html 上的任何内容。

我的意思是，将 jQuery 代码放入 index.jsx 中，而不是放入 index.html 中:

// index.jsx 
$(document).ready(function(){ 
 $("body").append("This is Hello World by JQuery"); 
}); 

它应该可以工作!

您还可以删除此代码，因为 BowerWebpackPlugin 会为您处理该代码:

alias: { 
   jquery: "./bower_components/jquery/dist/jquery.js" 
} 

它是如何工作的？

1. index.jsx 通过 Webpack 加载。
2. $ 用作自由变量，但由于 ProvidePlugin，它将解析为 require("jquery") <
3. require("jquery") 解析从 bower Components 文件夹导入 jQuery 感谢 BowerWepackPlugin。

如果没有 ProvidePlugin 而只有 BowerWebpackPlugin，您将不得不编写:

// index.jsx 
var $ = require("jquery"); 
 
$(document).ready(function(){ 
 $("body").append("This is Hello World by JQuery"); 
});