个人中心
gpt4 book ai didi

npm - 使用带有 Bower 的 webpack

转载 作者：行者123 更新时间：2023-12-03 13:26:05 25 4
gpt4 key购买 nike

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

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

项目结构

enter image description here

最佳答案

首先，也许您只是忘记了，但可以肯定的是，我想指出您似乎在问题中向我们展示了 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");
});

关于npm - 使用带有 Bower 的 webpack，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32050882/

25 4 0
文章推荐： reactjs - 使用 React Router 组件进行重定向
文章推荐： reactjs - 如何捕获服务器上的 React propTypes 警告？
文章推荐： reactjs - refs 与 onChange
文章推荐： meteor - const 后出现意外的 token
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com