Coding

USING 3RD PARTY PACKAGES LIKE JQUERY| Webpack 2 Basics Tutorial

  • 00:00:01 when I can do this video I already
  • 00:00:03 created a couple of videos on webpack
  • 00:00:06 and how you may set it up how it works I
  • 00:00:08 also do Blanqui create for videos on it
  • 00:00:11 and for example to also show how you may
  • 00:00:13 set up web peg with UJS or react so I
  • 00:00:16 already have a video on the latter one
  • 00:00:18 on this channel but in this video I want
  • 00:00:20 to start with the basics of using
  • 00:00:22 third-party packages because that of
  • 00:00:24 course is a common use case you don't
  • 00:00:27 only have your code you also use a
  • 00:00:29 third-party package and it's important
  • 00:00:31 to understand how you may import such a
  • 00:00:33 package with web paper with WebEx queue
  • 00:00:36 to be precise so I will start with that
  • 00:00:39 project we already created web pack in
  • 00:00:42 one of my last videos and if you haven't
  • 00:00:43 watch these you can just find the link
  • 00:00:45 in the video description now with this
  • 00:00:48 project I want to add jQuery now I
  • 00:00:50 already do use NPM to manage my project
  • 00:00:54 and then the package.json file thus far
  • 00:00:56 we only have a couple of development
  • 00:00:58 dependencies now I want to install a
  • 00:01:00 production dependency jQuery so I can
  • 00:01:03 use NPM and run NPM install – – save –
  • 00:01:07 mark it as a normal dependency not a
  • 00:01:09 development dependency and of course
  • 00:01:11 it's jQuery which I want to install so
  • 00:01:14 by heading enter it will be downloaded
  • 00:01:15 and put into my node modules folder and
  • 00:01:18 as you can see it also added this
  • 00:01:21 dependency to the package of chases well
  • 00:01:22 that's the first step but not the only
  • 00:01:25 step now how can we use jQuery now we
  • 00:01:30 can go to the app dot JS file and we
  • 00:01:33 could start using jQuery by adding the
  • 00:01:35 dollar selector here and then using
  • 00:01:38 jQuery like output paragraph now is
  • 00:01:41 controlled by jQuery it's a jQuery
  • 00:01:43 object so we should be able to use the
  • 00:01:45 text function here and of course all the
  • 00:01:48 down here text like that and this should
  • 00:01:53 just work shouldn't it now we could also
  • 00:01:56 expect that we couldn't use jQuery like
  • 00:01:59 this like right with instead of the
  • 00:02:01 dollar sign jQuery to get this random in
  • 00:02:04 button and then instead of using add
  • 00:02:06 eventlistener click we could just listen
  • 00:02:09 or just add the click method and then
  • 00:02:11 execute that whenever a click happens
  • 00:02:14 if we restart npm run builds our
  • 00:02:17 development server now we will see that
  • 00:02:20 it doesn't work like that so now it
  • 00:02:23 compiles and on the first look it looks
  • 00:02:25 like everything works but on our page we
  • 00:02:28 see that we get an error the dollar sign
  • 00:02:30 is not defined now what's wrong we
  • 00:02:33 install it's jQuery and we know that
  • 00:02:35 Jake rigged exposes this dollar sign
  • 00:02:37 function so why is it not found because
  • 00:02:41 we never include jQuery we install it
  • 00:02:44 yes but we install a lot of things we do
  • 00:02:47 have a lot of files in our project just
  • 00:02:49 because we have a file in the node
  • 00:02:51 modules folder doesn't mean that we use
  • 00:02:54 it here so what we could do is we could
  • 00:02:57 go to the top of our app dot J's fault
  • 00:03:00 and we could simply import jQuery like
  • 00:03:03 that maybe
  • 00:03:03 so basically use the package name we
  • 00:03:06 have here to pull in the full package
  • 00:03:09 and as a side note this syntax is
  • 00:03:11 correct since it's a package managed
  • 00:03:14 wire NPM we don't need to add the
  • 00:03:17 relative part to the javascript file
  • 00:03:19 here we can just specify the package
  • 00:03:21 name as a pop and NPM or web pack in the
  • 00:03:24 end we'll figure out where that sits so
  • 00:03:27 if we now while we start the server or
  • 00:03:30 just save would have been enough we will
  • 00:03:32 see that as soon as this has restarted
  • 00:03:34 here and we go back to a web page we
  • 00:03:38 still get the same error however what
  • 00:03:40 you also see is if you have a look at
  • 00:03:43 the network tab our bundle increased in
  • 00:03:45 size you might have not noticed this
  • 00:03:47 before but it was smaller and you can
  • 00:03:50 see this in the sources tab if you have
  • 00:03:51 a look at the bundle here bundled up
  • 00:03:53 shares and actually if you in their
  • 00:03:55 search for jQuery you'll find a lot of
  • 00:03:58 jQuery references in there so besides
  • 00:04:01 our own code this here looks pretty much
  • 00:04:04 like we did included so it should be
  • 00:04:07 available and yet we can't use it the
  • 00:04:10 reason for this is that what gets added
  • 00:04:14 to the overall bundle web pack doesn't
  • 00:04:17 create the connection between the jQuery
  • 00:04:21 code which was added to the bundle and
  • 00:04:23 our code where we use it
  • 00:04:25 so this is why we were not able to use
  • 00:04:28 it however we're very close to making
  • 00:04:30 this work we only need to adjust our web
  • 00:04:33 config file here in the plugins area I
  • 00:04:38 now need to use a special plugin web
  • 00:04:40 heck ships with since web peg ships with
  • 00:04:43 that I'll add web pack here as a import
  • 00:04:46 in my config file now so require web
  • 00:04:49 pack here and down on the plugins and I
  • 00:04:52 want to add a new plug-in position
  • 00:04:54 doesn't really matter but I'll add it as
  • 00:04:56 a first plug-in here and I will use
  • 00:04:59 webpack and there another function there
  • 00:05:02 the provide plug-in like this now the
  • 00:05:06 provide plug-in takes JavaScript object
  • 00:05:09 as an argument and here we can basically
  • 00:05:11 map variables or functions or objects we
  • 00:05:15 use in our code two packages which
  • 00:05:19 provide the actual function the actual
  • 00:05:22 code we want to use so here we can
  • 00:05:24 basically say map dollar sign to jQuery
  • 00:05:28 like this and all the map jQuery should
  • 00:05:31 shake reserve that we can use both ways
  • 00:05:33 if we now reload or restart this process
  • 00:05:38 with the change configuration file we
  • 00:05:41 should see that if we reload this one
  • 00:05:45 more time here the error is gone and it
  • 00:05:48 works as before but keep in mind we're
  • 00:05:50 using jQuery code here and the reason
  • 00:05:53 why it works as before is because we
  • 00:05:55 added this plug-in our config file and
  • 00:05:57 this plug-in basically tells web pack
  • 00:06:00 whenever you encounter the dollar sign
  • 00:06:03 or the jQuery function the plug-in we
  • 00:06:07 specify here where the package I should
  • 00:06:09 say the package we specify here is
  • 00:06:11 providing the actual code and indeed the
  • 00:06:14 check we package provides the jQuery
  • 00:06:17 function which is all the el es with the
  • 00:06:19 dollar sign here so that is where we
  • 00:06:22 built this connection and why this will
  • 00:06:24 now work and this is how you can add a
  • 00:06:27 plug-in or excuse me package like jQuery
  • 00:06:29 to your existing web pack workflow I
  • 00:06:32 hope this was helpful see you in the
  • 00:06:34 other videos bye