Geek Answers Handbook

Using webpack with a gazebo

I have a basic ReactJS application. I use webpack and want to use modules from the gazebo. I installed bower-webpack-plugin and added the jquery library to 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: I am now using this webpack configuration with bauer 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 the main page, I get an error message: "$ not defined".

project structure

enter image description here

+7
npm bower reactjs webpack
source share
2 answers

At first , maybe you just forgot, but of course I want to note that it looks like you pointed us the jquery bower.json file in your question. In fact, your project does not have a bower.json file at its root.

If you want to use Bower for dependency management, make sure you have bower.json by running bower init in the root directory of your project, and then run, for example, bower install --save jquery .

See the dower doc for more information;)

Also , the problem is that you are trying to use jQuery in index.html , therefore not in a module controlled by webpack.
Webpack does not actually process 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 BowerWebpackPlugin handles this for you:

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

How it works?

  • index.jsx loaded via Webpack.
  • $ used as a free variable, but thanks to ProvidePlugin it will allow require("jquery")
  • require("jquery") allows you to import jQuery from the bower components folder thanks to BowerWepackPlugin .

Without ProvidePlugin and only BowerWebpackPlugin you would have to write:

 // index.jsx var $ = require("jquery"); $(document).ready(function(){ $("body").append("This is Hello World by JQuery"); });
+11
source share

add permission field:

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

and add this to your plugin:

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

hope this helped

0
source share

More articles:


All Articles