{"id":6955,"date":"2020-04-29T20:34:12","date_gmt":"2020-04-29T15:04:12","guid":{"rendered":"https:\/\/code4developers.com\/?p=6955"},"modified":"2022-02-27T16:20:17","modified_gmt":"2022-02-27T10:50:17","slug":"transpiling-in-javascript","status":"publish","type":"post","link":"https:\/\/code4developers.com\/transpiling-in-javascript\/","title":{"rendered":"Transpiling in JavaScript"},"content":{"rendered":"<p><strong>Transpiling<\/strong> is a term used for taking source code written in one language and converting or transforming it into another language.<!--more--><\/p>\n<p>All the browsers does not support JavaScript code written in ES6. It is a big challenge for every new gen developers. Now converting this ES6 code to ES5 is called Transpiling so it can be read by all the browsers.<\/p>\n<p>Few in demand transpiling tools are: <strong>Babel<\/strong>, <strong>Webpack<\/strong>, and <strong>Traceur<\/strong>. Here we will talk about <strong>Babel<\/strong>, a tool which I like and uses the most.<\/p>\n<h4 id=\"what-is-babel\">What is Babel?<\/h4>\n<p>Babel is a tool mainly used to convert any ES5+ code into a backward compatible JavaScript code in current and older browser or environment. Babel offers better readability and understandability of the code it generate, after transpiling and makes developer&#8217;s life easy.<\/p>\n<h4 id=\"what-can-babel-do\">What can Babel do?<\/h4>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Transform syntax<\/li>\n<li>Polyfill features that are missing in your target environment<\/li>\n<li>Source code transformations<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Let&#8217;s have a look at before and after version of using Babel.<\/p>\n<h4 id=\"before\">Before:<\/h4>\n<pre class=\"theme:github lang:js decode:true \">let addition = (...numbers)=&gt;{\r\n\tvar sum = 0;\r\n  \t\r\n  \tfor(var i=0; i&lt;numbers.length;i++){\r\n    \tsum+=numbers[i];\r\n  \t}\r\n}<\/pre>\n<p>In above code we have used <a href=\"https:\/\/code4developers.com\/spread-syntax-in-javascript\/\"><strong>spread syntax<\/strong><\/a> which is not supported in older browser. Now to convert this code we can use babel.<\/p>\n<h4 id=\"after\">After:<\/h4>\n<pre class=\"theme:github lang:js decode:true \">\"use strict\";\r\n\r\nvar addition = function addition() {\r\n  var sum = 0;\r\n\r\n  for (var i = 0; i &lt; arguments.length; i++) {\r\n    sum += i &lt; 0 || arguments.length &lt;= i ? undefined : arguments[i];\r\n  }\r\n};<\/pre>\n<p>After comparing above code now you will able identify when to use this tool. Here I will not cover detail about Babel as we were trying to explain Transpiling only. I will suggest few below links to setup and\u00a0 read more about Babel.<\/p>\n<ul>\n<li><a href=\"https:\/\/babeljs.io\/setup\" target=\"_blank\" rel=\"noopener\">Setup<\/a><\/li>\n<li><a href=\"https:\/\/babeljs.io\/repl#?browsers=&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=Q&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=true&amp;presets=es2015&amp;prettier=false&amp;targets=&amp;version=7.9.0&amp;externalPlugins=\" target=\"_blank\" rel=\"noopener\">Playground to try Babel<\/a><\/li>\n<li><a href=\"https:\/\/babeljs.io\/docs\/en\/\" target=\"_blank\" rel=\"noopener\">Official Docs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Transpiling is a term used for taking source code written in one language and converting or transforming it into another language.<\/p>\n","protected":false},"author":4,"featured_media":3127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[316,22,317,315,67],"powerkit_post_featured":[],"class_list":{"0":"post-6955","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-babel","9":"tag-javascript","10":"tag-traceur","11":"tag-transpiling","12":"tag-webpack"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-1Ob","jetpack-related-posts":[{"id":3119,"url":"https:\/\/code4developers.com\/difference-between-javascript-and-ecmascript\/","url_meta":{"origin":6955,"position":0},"title":"What\u2019s the difference between JavaScript and ECMAScript?","author":"Arif Khoja","date":"October 31, 2017","format":false,"excerpt":"I\u2019ve tried googling \u201cthe difference between JavaScript and ECMAScript.\u201d I ended up having to wade through a sea of ambiguous and seemingly conflicting results: \u201cECMAScript is a standard.\u201d \u201cJavaScript is a standard.\u201d \u201cECMAScript is a specification.\u201d \u201cJavaScript is an implementation of the ECMAScript standard.\u201d \u201cECMAScript is standardized JavaScript.\u201d \u201cECMAScript is\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3150,"url":"https:\/\/code4developers.com\/webpack-introduction-without-code\/","url_meta":{"origin":6955,"position":1},"title":"Webpack: introduction without any code.","author":"Arif Khoja","date":"December 1, 2017","format":false,"excerpt":"There have existed build tools for JavaScript as long as I have been coding with it. I can without doubt say that they are better and easier to understand today than they have ever been. But there are also much more you \u201cneed\u201d to know before you get started. The\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3230,"url":"https:\/\/code4developers.com\/whats-new-ecmascript-2018\/","url_meta":{"origin":6955,"position":2},"title":"What\u2019s new in ECMAScript 2018","author":"Arif Khoja","date":"February 16, 2018","format":false,"excerpt":"Four new feature proposals for the specification underlying JavaScript are finalized and four others are under consideration ECMAScript, the standard specification underlying JavaScript, is on track for a new release, likely in June. So far, four proposals have been finalized for inclusion in the ECMAScript 2018 specification, said Zibi Braniecki,\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"ecma script","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/ecma.png?fit=400%2C277&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14692,"url":"https:\/\/code4developers.com\/demystifying-javascript-tree-shaking\/","url_meta":{"origin":6955,"position":3},"title":"Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size","author":"Yatendrasinh Joddha","date":"October 17, 2023","format":false,"excerpt":"In the ever-evolving world of web development, optimizing the performance of your JavaScript applications is a key concern. One effective technique to achieve this is called \"tree shaking.\" In this article, we'll delve into the concept of tree shaking, explain how it works, and provide a detailed example to illustrate\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3182,"url":"https:\/\/code4developers.com\/react-blog-post-serieses-react-development\/","url_meta":{"origin":6955,"position":4},"title":"React: A blog post series about React development","author":"Arif Khoja","date":"December 30, 2017","format":false,"excerpt":"One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3106,"url":"https:\/\/code4developers.com\/javascript-template-literals\/","url_meta":{"origin":6955,"position":5},"title":"Javascript: What Are Template Literals?","author":"Arif Khoja","date":"September 30, 2017","format":false,"excerpt":"ES6 introduced two types of literals: Template Literals and Tagged Template Literals to tag Template Literals. In this post, we cover both of them in depth! In ES6, two types of literals were introduced: Template Literals for string concatenation and expression embedding in a string Tagged Template Literals to tag\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/thumb-1-e1498942297714.png?fit=240%2C269&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/6955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=6955"}],"version-history":[{"count":4,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/6955\/revisions"}],"predecessor-version":[{"id":6960,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/6955\/revisions\/6960"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=6955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=6955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=6955"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=6955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}