Question

我有一个基本的ReactJS应用程序。我使用webpack，并希望使用来自凉亭的模块。我安装了bower-webpack-plugin并在凉亭中添加了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>

当我打开主页时，收到错误消息：＆＃34; $未定义＆＃34;。

项目结构

Answer 1

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

如果您想使用Bower来管理依赖项，请确保在项目的根目录下运行bower.json，然后运行bower init实例{。}}。

有关详细信息，请参阅the bower doc;）

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

我的意思是，将您的jQuery代码放在index.html中，而不是将其放在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" }通过Webpack加载。
index.jsx用作自由变量，但由于$，它将解析为ProvidePlugin
require("jquery")解析为从require("jquery")文件夹导入jQuery 感谢bower components。

如果没有BowerWepackPlugin而只有ProvidePlugin，则必须写下：

BowerWebpackPlugin

Answer 2

添加解决方案字段：

resolve: {
    alias: {
        jquery:"/your/path/to/jquery"
    }

}

并将其添加到您的插件中：

 plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
        })
    ]

希望它有所帮助

使用webpack与凉亭

2 个答案: