How to use Webpack and Babel to transpilate the Javascript code and adapt it to any browser, so you can use the new features of Javascript with the certainty that your code will run correctly on any platform.
In a frontend project it is important to use the latest developments in the Javascript language. Sometimes because it is useful and productive for the developer, since generally the new features of the language allow a more summarized code, which offers greater ease of maintenance. Sometimes simply because the stack of technologies and the frameworks used require it.
Of course, not all the new features of the language are always available in all browsers, which is why the code transpilation operation is essential. Surely by now everyone knows what transpilar is, but in case some clueless person does not know, it is an operation between the compiler and the translation, through which the code created with higher versions of Javascript (or Javascript supersets such as TypeScript) is transformed into code compatible with all browsers on the market.
In this article we will show you how to transpilate Javascript with Webpack. It is a very simple operation to perform, which will allow us to learn something new in our .
Note: During the article we are going to offer alternatives to work with Babel 6 and Babel 7, since Babel7 has been presented a few days ago and the BabelJS npm package names have changed.
babel loader
Webpack loaders perform an important function within the packaging system. They allow you to recognize and work with different types of files, such as CSS. Although it is true that Webpack recognizes Javascript by default, if we use Javascript of modern versions and want to convert it to a Javascript compatible with older browsers, it is necessary to have Babel and load the Webpack loader to work with Babel.
Babel-loader will take care of bridging Babel and Webpack itself, so we have to start by installing it in our project.
npm i -D babel-loader
install babel
To transpile Javascript the tool we will use will be BabelJS. It is not a specific Webpack utility, but a standalone tool that we can use in many frontend development workflows. To use it inside Webpack we will use the babel loader.
The first step will then be to install this development dependency, with the following console command. We will see how to install the necessary dependencies in Babel versions 6 and 7.
Installation in Babel 6
This is the command to install Babel in version 6, which today is not the most current, but which remains available for historical reasons.
Additionally, we need to install Babel itself in the project, also as a development dependency.
npm i -D babel-core
How to install babel 7
Update: Babel 7 has just been released. This release has caused a change in the names of the npm dependencies that we need to use Babel, so we are going to give the installation commands that you should use today for new projects. The Webpack loaders, as well as the Webpack plugins that use Babel below, are still compatible with Babel 7 and install the same.
This would be the command to install babel-core for Babel 7:
npm install –save-dev @babel/core
Configuration in webpack.config.js
Once installed, we have to configure Webpack to make Babel work, through the .
The code that we will have to use will be something similar to the following:
module.exports = { module: { rules: } }
So far we have done the configuration related to Webpack, but we still have some work to configure Babel.
Configure Babel in the project
Basically, this procedure consists of telling Babel the type of transpiling to perform. Now in Babel it is recommended to use a “preset” that indicates that the version of our Javascript code is ES2015, ES2016 and ES2017 (all together). In this way we managed to have all the news of the Javascript standard of recent years.
It consists of two steps, first the installation of the preset and then the configuration through a file called “.babelrc”.
We have to start by installing the “env” preset dependency, which is recommended for most cases and allows a very simple configuration of the browsers we are targeting.
Install Preset-env in Babel 6
Let’s first look at the Babel 6 alternative:
npm i -D babel-preset-env
Install Preset-env in Babel 7
Now the command alternative to install the “env” preset for Babel 7:
npm i -D @babel/preset-env
Configuration of the browsers to which we address
Additionally, we have to create a Babel configuration file, which we will place in the root of our project, right in the place where the package.json is located. The file we have to create is called “.babelrc”.
There are several ways to tell Babel how we want it to work. The recommended option is to use the “.babelrc” file, but there are other alternatives that you can find in the documentation. At the end of this article I will explain an alternative that I also use a lot, which is the Babel configuration in the webpack.config.js file itself, which allows me to have different types of Javascript compilation in the same project.
The .babelrc configuration file contains JSON code. In it we have to indicate that we are going to use the preset that has just been installed “env”.
preset-env configuration file in Babel 6
The configuration is different depending on the version of Babel, since the dependency has been renamed. This would be the basic code for Babel 6.
{ “presets”: }
preset-env configuration file in Babel 7
In the case of Babel 7 the name of the “env” preset has changed and we will also have to update the .babelrc. We will be like this:
{ “presets”: }
Now let’s look at a slightly more advanced .babelrc code file, in which we specify in more detail the “target” of browsers that we are addressing.
{ “presets”: }, “debug”: true } ]]}
This way of working with the preset-env is highly recommended, since it allows us to indicate which browsers we want to target, without the need to specify specific versions. We are simply telling you:
- Compile the code to support browsers with a usage share of 1% or higher.
- Do not compile for Internet Explorer 11 (not ie 11). Obviously, you’ll have to remove this if you want to support that dinosaur 😛
- Do not compile for Opera mini (I think Opera Mini would not enter as browsers with use greater than 1%, but I prefer to be explicit, because it does not support anything and nobody uses it!)
This would be enough in principle to work.
Keep in mind that this part of configuring Babel is not always easy. It depends a lot on the project you have in hand to adjust the preferences. I have explained the basics in this article, but the truth is that if you have special needs, you may need to do more things, such as installing Babel plugins to be able to use Javascript code more in very modern versions. Anyway, be patient if it doesn’t work out the first time, in which case it’s time to ask Google. I also recommend you read the following article, in which we will explain more advanced Webpack configurations for .
Enabled to use Javascript code ES2015 (ES6) onwards
As we have set up our project, we can now use the Javascript code with the new versions. Let’s look at some code that we could put in our entry point file.
Note: in principle the entry point of Webpack is the file that is in the path “src/index.js”. But remember that this is a default setting that you can easily change, as explained in the . class myClass { constructor(x, y) { this.x = x; this.y = and; } showX() { console.log(this.x); } add(…values) { let sum = 0; for(let i in values) { sum += values; } return sum; } } const myObj = new myClass(2, 5); myObj.sampleX(); console.log(myObj.add(2, 4, 5, 6)); Note: This Javascript code has a couple of details in ES6, such as the use of classes, working with other variable declarations like const and let, as well as the rest operator. If you don’t know all these things you can learn them.
ES6 Imports
Another interesting thing that we can do now that we are enabled to work with Javascript ES2015 is to carry out imports, with which we can bring the code from other modules.
This is something of vital importance for the maintenance of the applications, since by being able to divide the code into different files, they are smaller, more manageable and more concise. We can put everything in its place and it will be easier to organize ourselves.
So, from our index.js we can write:
import ‘./myModule.js’;
This means that we have a file called myModule.js that will be in the same folder as index.js. When making the bundle, Webpack will merge the code from index.js with the code from myModule.js in the output Javascript.
Import libraries installed via npm
Another thing that you can easily import is third-party dependency libraries, which you have installed via npm. The way to do it will depend a little on the organization of the bookstore, but in general terms it will be more or less like this.
First install the corresponding library using npm. For example, this is how we installed moment, a powerful and popular library for working with dates.
npm i moment
Now, from the Javascript file where you want to use moment, you will have to import it with the following sample code.
import moment from ‘moment’; import es from ‘moment/locale/es’;
In this case we have to import two things. The first is the moment library itself and the second is used to import the “locals” for Spanish, that is, all the translations of the library that you use so that the messages appear in Spanish.
Later you can use the momentjs library normally.
let timeFrom = moment(“20180611”, “YYYYMMDD”).fromNow();
Run Webpack with transpilation
This step will be the same as always. Remember that we can run Webpack directly from the command line, with the following instruction.
webpack –mode production
But that generally you will have your npm scripts to do something like “npm run build”, as we already explained in the article about .
Once the bundle with our code has been produced, we will have everything together in a single Javascript file, which will be compatible with all browsers, even those that only understand ES5 (mainly IE 11 and earlier).
When making the bundles, Webpack will offer us an output like the following. In it we can verify that…
Facebook Comments
Disqus