Babel's initial release took the world by storm. Soon after it first appeared, various frameworks like React, Vue and Ember embraced it. Developers often use the product without knowing that it works in the background – more than one popular npm project has a dependency on Babel.
These dependencies transformed the release process of the predecessor into a conflict-fraught affair. Version 7, still managed by a small maintainer team, thus tried to be as compatible as possible. Breaking changes are few and far between, while code generation quality remains high.
01. Version check
Babel usually lives in the Node runtime environment. Let's start out by checking the versions used. The output provides the version state found on the Ubuntu 14.04 workstation used to create the following article. This isn't pedantry – the figure accompanying this step shows that the Babel team dropped support for quite a few Node.js versions.
02. Change of package names
One breaking change in version 7 has involved moving the Babel packages into their own namespace. Older packages were not removed from the various repositories. This is important, as the use of legacy package names leads to the situation shown in the figure accompanying this step.
03. Add a build action
The step above assumes that you work inside of an npm project. In that case, running Babel via the build action is easy. Open package.json and modify it as demonstrated in the code below:
04. Transpile code by hand
Putting Babel to work involves firing off the build action. This is best accomplished via the npm run command. The -d value informs Babel that the results must be placed in the lib folder – the figure accompanying this step shows that the folder gets created on the fly.
05. A question of configuration
Invoking Babel without further configuration options does not enable transpilation. Code can be transpiled only if the framework receives further information about the target environment. This can be done via a command line parameter, or by creating a file called .babelrc in the project root.
06. Configure the babelrc
Babel configures itself via a set of plugins, each of which applies transpilation transforms to the code base. We use the preset-env package – it comes with a pre-configured set of transformations intended to cover most bases.
07. Time for a test drive
08. Adjust targeting
09. Advanced targeting
Babel's browser targeting isn't limited to Chrome and Internet Explorer. Thanks to cooperation with browserslist, developers can mix and match from more than a dozen targets, as shown below.
Names are case insensitive:
- Android for Android WebView.
- Baidu for Baidu Browser.
- BlackBerry or bb for Blackberry browser.
- Chrome for Google Chrome.
- ChromeAndroid or and_chr for Chrome for Android.
- Edge for Microsoft Edge.
- Electron for Electron framework. It will be converted to Chrome version.
- Explorer or ie for Internet Explorer.
- ExplorerMobile or ie_mob for Internet Explorer Mobile.
- Firefox or ff for Mozilla Firefox.
- FirefoxAndroid or and_ff for Firefox for Android.
- iOS or ios_saf for iOS Safari.
- Node for Node.js.Opera for Opera.
- OperaMini or op_mini for Opera Mini.
- OperaMobile or op_mob for Opera Mobile.
- QQAndroid or and_qq for QQ Browser for Android.
- Safari for desktop Safari.
- Samsung for Samsung Internet.
- UCAndroid or and_uc for UC Browser for Android.
10. Advanced targeting, part two
Browserlist can also take advanced queries. Its homepage lists the configuration options, almost all of which can also be used inside Babel by modifying babelrc. Queries can be evaluated locally if your workstation has npx installed.
11. Automatic transpilation
Having to invoke Babel by hand gets tedious quickly. The nodemon utility monitors filesystem resources and fires off commands as changes get detected. In theory, adding nodemon support is handled via a small change to package.json.
12. Check for presence
Some workstations have nodemon installed globally. If this is not the case, invoking the program will yield an error message similar to the one shown below. Fortunately, deploying nodemon is easily accomplished via the npm install command.
13. Check functionality
Fire off npm start in a terminal window and proceed to change the content of index.js with an editor like gedit or Visual Studio Code. After saving, nodemon will output status information.
14. Fix transpilation
While nodemon's detection should work flawlessly at this point, the contents of the index.js file that are found in lib do not update. This is caused by a nicety of babel-node – it does not commit the transpiled files to the disk. It instead fires off a modified version of the Node CLI, which works with the transpiled files.
15. Transpile code programmatically
Babel isn't limited to working on the command line. If the correct packages are installed, code can also be transpiled from another program. The snippet accompanying this step applies a set of basic transformations to an input string. Keep in mind that the configuration settings, usually, are obtained from a babelrc file.
16. Transpile entire files
17. Sync and async
Babel 7 introduced synchronous and asynchronous versions of most API calls. Make sure to pick the right one for your needs – while transpiling small examples can be done on the fly, setting Babel loose on more complex files can easily lead to delays running into dozens of seconds.
18. Learn about individual plugins
Should you ever find yourself wondering about what happens in the background, simply visit this page. It provides a list of all plugins currently contained in the Babel distribution, and also contains a few hints for all those seeking to create a plugin of their own.
19. Strip out TypeScript specifics
20. Run Babel online
While the transpilation operations usually work out smoothly, problems sometimes do occur. In that case, the Babel REPL is helpful. It runs Babel in the browser of your workstation and shows input and output right next to one another.
21. Learn about pain points
Our introduction explained that Babel sees widespread use across various projects. Babel's maintainer team simplifies version upgrades with a detailed change log. If you use Babel programmatically, do not forget to consult the API upgrade guide.
from Creative Bloq http://www.creativebloq.com/how-to/get-started-with-babel-7