A simple introduction to webpack, babel and SWC (used by Next.js)
A simple introduction to webpack, babel and SWC (used by Next.js)
In this video, I introduce Webpack and Babel to you and we explore how to improve the development setup using SWC as our compiler. This video is great for beginning developers who are trying to understand modern JS development and how we arrived at our current setups.
[resources]
Babel - https://babeljs.io/docs/en/usage
Webpack - https://webpack.js.org/
SWC - https://swc.rs/docs/getting-started
00:00 - Start
00:11 - A bit of transpilation history
03:31 - Let’s set up a sample project with webpack
03:45 - Add babel
05:02 - Add plugins
05:39 - Introducing SWC
06:32 - Setting up SWC
Content
0.16 -> hello again today i'm going to introduce
2 -> webpack to you and you're going to set
3.6 -> up a simple react project together with
5.759 -> bubble and swc before we get into it
8.639 -> it's important to know why you need a
10.32 -> transpiler for your code javascript is a
12.32 -> great language in itself one of its most
14.88 -> informative qualities is that it changes
16.72 -> more rapidly than any other language new
18.88 -> features are added on a constant basis
20.72 -> and new syntax are introduced with those
22.48 -> features it's hard for us to keep up
24.4 -> with those changes now this would be a
25.84 -> good thing for any language it means
27.68 -> it's growing and it's getting better
29.119 -> with time but the problem is almost
31.279 -> every single browser has its own
33.2 -> implementation of the javascript engine
34.96 -> firefox has spider monkey google chrome
37.44 -> has the v8 engine which is also the same
39.68 -> engine that node.js uses safari has
41.76 -> javascript core and microsoft edge has
44.239 -> the chakra engine which was recently
46.16 -> changed to chrome's v8 engine all these
48.48 -> engines implement the ecmascript
50.239 -> standard which is responsible for
51.92 -> developing and improving the modern
53.68 -> javascript features you see every now
55.28 -> and then javascript as a language
56.879 -> conforms to this ecmascript standard
59.28 -> meaning it implements features that are
61.359 -> added to the standard now since all
63.039 -> these engines are developed by different
64.96 -> people in different companies it's never
66.88 -> a guarantee that they'll all implement
68.799 -> the ecmascape standard 20. most of them
71.119 -> just roll out new changes gradually
73.04 -> together with new browser version so you
74.56 -> may notice that older versions of the
76.24 -> browsers don't have the same javascript
78.159 -> features as the more recent versions so
80.159 -> if your users or readers are on an older
82.479 -> version of chrome say version 40 and you
85.04 -> have used other functions which were
86.72 -> introduced in ecmascript 6 and was
88.88 -> rolled out in chrome version 45 your app
91.04 -> will surely crash because the browser
93.04 -> doesn't understand the syntax yet the
94.88 -> same thing happens to javascript apis
96.88 -> for example the intersection of server
98.72 -> api which was added to firefox on
100.799 -> version 55. if users visited your site
103.2 -> with an older browser version they'll
104.96 -> get unexpected errors and your code
106.96 -> won't work as you expected that's why
108.64 -> polyfills were introduced polyfills
110.64 -> basically check for missing features for
112.56 -> instance the intersection observer api
114.799 -> and if the feature is missing they
116.64 -> implement it using the browser's current
118.64 -> features so your app won't stop working
120.56 -> so you ship the polyfill code together
122.32 -> with your app another way we can fix
124 -> incompatibility with our code is use
126 -> something like modernizer library for
127.68 -> future detection and not include the
129.52 -> code using the new shiny features if the
131.44 -> future detection fails i don't know if
133.28 -> modernizer is used these days because it
135.36 -> used to be popular back in the day for
137.04 -> all the issues above the javascript
139.12 -> ecosystem had to come up with new modern
141.68 -> ways to solve this problem instead of
143.36 -> having to do feature detection and
144.879 -> polyfills we could just convert the code
146.879 -> back to a specific syntax say ecmascape
149.12 -> 2015 which is supported by majority of
151.68 -> the browsers and ship that converted
153.84 -> code your code will now work on all
155.519 -> those targeted browsers without you
157.28 -> having to break a sweat this process of
159.28 -> converting the code to a specific
160.8 -> javascript version is called transpiling
162.959 -> this is what babel and swc does if you
165.44 -> think about it transpiling is a crucial
167.68 -> element of javascript development it
169.519 -> gives us the power to leverage new and
171.36 -> powerful javascript features without
172.959 -> alienating any of our users they'll all
175.28 -> experience our sites the same way and
177.36 -> our productivity will be unaffected
179.36 -> everybody wins now that we've got that
181.12 -> out of the way let's dive into how we
182.8 -> can set up transpilation with barbell
184.879 -> and webpack bubble is the most popular
186.64 -> javascript compiler it performs both
188.8 -> transpilation and polyfilling for you
190.64 -> webpack bundles the code for you into a
192.48 -> javascript file that you can just add in
194.64 -> a script tag in a html file these two
197.04 -> used together automate the majority of
199.36 -> your javascript development workflow to
201.28 -> demonstrate how it works we are going to
203.2 -> set up a react project using barbell and
205.519 -> webpack if you have used create jacked
207.36 -> app before this is what it does under
209.36 -> the hood for you first thing we'll do is
211.44 -> initialize a new project using npm init
214.239 -> y in our directory of choice this will
216.319 -> generate a package.json file for us next
219.2 -> we'll add webpack dependencies to the
221.2 -> project next step is setting up bubble
223.28 -> let's add the bubble dependencies that
224.959 -> we'll be using here we are adding bubble
227.36 -> and the presets we'll be using in our
228.959 -> app presets are bubble plugins that tell
231.12 -> it how to compile or build your project
233.84 -> the preset end preset contains all the
236.319 -> rules that bubble needs to compile your
238.159 -> code to es2015 javascript syntax the
240.879 -> preset react helps bubble build react
243.04 -> and jsx code we'll also create a bubble
246 -> rc file which holds the bubble
247.84 -> configuration settings and will add the
249.76 -> presets we just installed to that file
252.239 -> next we'll add a
253.879 -> webpack.config.js file and tell it to
255.92 -> use bubble to transpile the react or jsx
258.639 -> code this means every js or dsx file
262.079 -> will be transpiled by bubble to es5 code
264.88 -> we can then add a build skip to our
267.68 -> one file that runs the compile script
269.919 -> now that you're done setting up barbell
271.68 -> and webpack let's set up react in the
273.6 -> project let's get a simple react
275.84 -> component in our app if we try building
278.16 -> the app by running npm run build you'll
280.72 -> see a directory created with a minified
282.88 -> build output from bubble as you can see
285.12 -> the transpilation worked and a safe code
287.36 -> was generated for us now as cool as it
289.759 -> is that we got this to work it's not as
291.759 -> helpful because we want to see our app
293.68 -> in action in the browser so we need to
295.28 -> set up webpack with html and css so we
298.24 -> can have an html file to view in the
300.4 -> browser the first thing we need is to
302.24 -> add the html pack plugin we then adjust
305.039 -> the web config with the html plugin we
307.84 -> then need to create the template file
309.84 -> that's the html plugin we use to inject
312.08 -> the code output after that we need to
314.479 -> move our index.js file with the react
317.039 -> components to its own component file in
319.12 -> src components directory in the index.js
321.759 -> file we'll mount our react components to
324 -> the dome we can then add the scripts to
326.24 -> start the development server if we run
328.08 -> npm run dev we should see our app in our
330.56 -> default browser now that we've been able
332.56 -> to set up everything we need to figure
334.479 -> out how we can improve our development
336.4 -> setup using swc swc stands for speedy
340.08 -> web compiler and is the new hot thing in
342.24 -> web development currently and for good
344.24 -> reason on its website the author claims
346.72 -> that it's 20 times faster than bubble
348.8 -> and can perform both code compilation
351.12 -> which babel does and bundling which
353.039 -> waypack does its bundler spark is
355.28 -> however still in development and is not
357.28 -> recommended as a replacement for webpack
359.759 -> these are pretty great features no
361.44 -> wonder everybody is excited about it it
363.36 -> was able to achieve such amazing specs
365.44 -> because it's written in rust which is
367.44 -> also a very popular systems language
369.44 -> just like c or c plus plus it being a
371.6 -> systems language means it has direct
373.84 -> access to hardware and memory making it
376.08 -> possible to build extremely fast and
378.479 -> memory efficient applications hence the
380.4 -> significant bumping speed of a bubble
382.319 -> which is written in javascript adding
384.16 -> swc to our webpack project involves
386.639 -> removing bubble as our transpiler and
388.88 -> replacing it with swc first let's
391.52 -> install swc we then replace bubble
394 -> loader with swc loader we then add a
397.8 -> swcrc config with configurations on
400.639 -> compiling our react code if we run npm
403.039 -> start everything should run just as it
405.36 -> did before you won't see any changes
407.28 -> visually but you'll notice code
408.8 -> compilation is much faster than before
410.639 -> especially if you have a lot of files to
412.4 -> work with and that is how we set up our
414.16 -> webpack project with webpack bubble and
416.639 -> swc this process is a bit complicated
419.28 -> that is why we have tools like react app
421.68 -> or create next app to help you do this
423.599 -> without a lot of mental overhead either
425.44 -> way it's important to know how things
427.36 -> work under the hood as a beginner
428.88 -> developer so i hope i scratch an itch
430.88 -> for you guys with this video thanks for
432.479 -> watching and i hope i have more stuff
434.08 -> for you soon
Source: https://www.youtube.com/watch?v=fzwxfPd6H-w