将 webpack 与 bower 一起使用

Question

我有一个基本的 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>

当我打开主页时，我收到错误消息：“$ is not defined”。

项目结构

Answer 1

添加解析字段：

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

}

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

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

希望对您有所帮助

Answer 2

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

如果您想使用 Bower 来管理依赖项，请确保您在项目的根目录下有 bower.json by 运行ning 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"
}

它是如何工作的？

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

如果没有 ProvidePlugin 而只有 BowerWebpackPlugin，您将不得不写成：

// index.jsx
var $ = require("jquery");

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

将 webpack 与 bower 一起使用

Usage webpack with bower

npm

bower

reactjs

webpack