CODEWITHSUNDEEP
npmreactjsbowerwebpack
Matt
Matt

Reputation: 8942

Usage webpack with bower

I have a basic ReactJS application. I use webpack and would like to use moduls from bower. I installed bower-webpack-plugin and add jquery library in bower.

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"
        }
    }
}

Edit: Now I am using this webpack config with bower dependencies and without 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>

When I open main page, I get error message: "$ is not defined".

project structure

enter image description here

Upvotes: 7

Views: 10541

Answers (2)

Almouro
Almouro

Reputation: 6514

First, maybe you just forgot, but to be sure, I want to point out that it seems you showed us the jquery bower.json file in your question. Your project doesn't actually seem to have a bower.json file at its root.

If you want to use Bower to manage dependencies, make sure you have a bower.json by running bower init at the root of your project and then run for instance bower install --save jquery.

See the bower doc for more info ;)

Besides that, the problem is that you're trying to use jQuery in index.html, so not in a webpack-managed module.
Webpack is not actually processing anything on your index.html.

What I mean is, put your jQuery code in index.jsx, instead of putting it in index.html:

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

And it should work!

You can also remove this code, since the BowerWebpackPlugin handles that for you:

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

How does it work?

  1. index.jsx is loaded through Webpack.
  2. $ is used as a free variable, but thanks to the ProvidePlugin, it will resolve to require("jquery")
  3. require("jquery") resolves to import jQuery from the bower components folder thanks to the BowerWepackPlugin.

Without the ProvidePlugin and only the BowerWebpackPlugin, you would have had to write:

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

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

Upvotes: 11

Fran&#231;ois Richard
Fran&#231;ois Richard

Reputation: 7045

add a resolve field:

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

}

and add this to your plugin:

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

hope it helped

Upvotes: 0

Related Questions