Npm 使用带凉亭的网页包_Npm_Reactjs_Bower_Webpack

Npm 使用带凉亭的网页包

npm reactjs webpack

Npm 使用带凉亭的网页包,npm,reactjs,bower,webpack,Npm,Reactjs,Bower,Webpack,我有一个基本的ReactJS应用程序。我使用webpack并希望使用bower提供的模块。我在bower中安装并添加了jquery库 webpack.config.js var BowerWebpackPlugin = require("bower-webpack-plugin"); var webpack = require("webpack"); module.exports = { entry: './index.jsx', output: { filen

我有一个基本的ReactJS应用程序。我使用webpack并希望使用bower提供的模块。我在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"
        }
    }
}

编辑：现在我使用的是bower依赖项，而不是bower网页包插件

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>


基本属性网格
$（文档）.ready（函数（）{
$（“body”）.append（“这是JQuery提供的Hello World”）；
});

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

项目结构

添加解析字段：

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

}

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

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

希望它对我们有所帮助，也许你只是忘记了，但我想指出的是，在你的问题中，你似乎向我们展示了jquery

bower.json

文件。实际上，您的项目的根目录中似乎没有

bower.json

文件

如果要使用Bower来管理依赖项，请确保在项目的根目录下运行

Bower init

，然后运行例如

Bower安装--save jquery

，从而拥有

Bower.json

有关详细信息，请参阅；）

除此之外，问题是您试图在
index.html
中使用jQuery，因此不在网页包管理模块中使用。
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
通过网页包加载
$
用作自由变量，但由于
提供了plugin
，它将解析为
要求（“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"); });

我试过了，但没用。请查看我编辑的问题。我的问题我忘记了别名字段，我编辑了我的答案现在让我知道它是否好这是方向你可能有其他问题idk，但在某个时候你会写这部分：）。顺便说一句，我认为您不需要index.jsx，index.html首先是好的，有时您必须处理遗留代码，并且需要在视图中访问
$
。或者您只需要在控制台中访问它，这样更方便。此外，BowerWebpackPlugin有一个真正的bug，请参见：。目前唯一的解决方法是公开自己
$
:window.$=require（'jquery'）；