(window.webpackJsonp=window.webpackJsonp||[]).push([[1794],{2202:function(t,a,e){"use strict";e.r(a);var s=e(31),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"transpiling"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#transpiling"}},[t._v("#")]),t._v(" Transpiling")]),t._v(" "),e("p",[t._v("Transpiling is the process of interpreting certain programming languages and translating it to a specific target language. In this context, transpiling  will take "),e("a",{attrs:{href:"https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js",target:"_blank",rel:"noopener noreferrer"}},[t._v("compile-to-JS languages"),e("OutboundLink")],1),t._v(" and translate them into the "),e("strong",[t._v("target")]),t._v(" language of Javascript.")]),t._v(" "),e("h2",{attrs:{id:"introduction-to-transpiling"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#introduction-to-transpiling"}},[t._v("#")]),t._v(" Introduction to Transpiling")]),t._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("p",[e("strong",[t._v("ES6/ES2015 to ES5 (via "),e("a",{attrs:{href:"https://babeljs.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Babel"),e("OutboundLink")],1),t._v(")")]),t._v(":")]),t._v(" "),e("p",[t._v("This ES2015 syntax")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ES2015 arrow function syntax ")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("n")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" n "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n\n")])])]),e("p",[t._v("is interpreted and translated to this ES5 syntax:")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Conventional ES5 anonymous function syntax ")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("n")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("   \n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" n "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),e("p",[e("strong",[t._v("CoffeeScript to Javascript (via built-in CoffeeScript compiler)")]),t._v(":")]),t._v(" "),e("p",[t._v("This CoffeeScript")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("# Existence"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\nalert "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"I knew it!"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" elvis"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n\n")])])]),e("p",[t._v("is interpreted and translated to Javascript:")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" elvis "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"undefined"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" elvis "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"I knew it!"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),e("p",[e("strong",[t._v("How do I transpile?")])]),t._v(" "),e("p",[t._v("Most compile-to-Javascript languages have a transpiler "),e("strong",[t._v("built-in")]),t._v(" (like in CoffeeScript or TypeScript). In this case, you may just need to enable the language's transpiler via config settings or a checkbox. Advanced settings can also be set in relation to the transpiler.")]),t._v(" "),e("p",[t._v("For "),e("strong",[t._v("ES6/ES2016-to-ES5 transpiling")]),t._v(", the most prominent transpiler being used is "),e("a",{attrs:{href:"https://babeljs.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Babel"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[e("strong",[t._v("Why should I transpile?")])]),t._v(" "),e("p",[t._v("The most cited benefits include:")]),t._v(" "),e("ul",[e("li",[t._v("The ability to use newer syntax reliably")]),t._v(" "),e("li",[t._v("Compatibility among most, if not all browsers")]),t._v(" "),e("li",[t._v("Usage of missing/not yet native features to Javascript via languages like CoffeeScript or TypeScript")])]),t._v(" "),e("h2",{attrs:{id:"start-using-es6-7-with-babel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#start-using-es6-7-with-babel"}},[t._v("#")]),t._v(" Start using ES6/7 with Babel")]),t._v(" "),e("p",[e("a",{attrs:{href:"https://kangax.github.io/compat-table/es6/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Browser support for ES6"),e("OutboundLink")],1),t._v(" is growing, but to be sure your code will work on environments that dont fully support it, you can use "),e("a",{attrs:{href:"https://babeljs.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Babel"),e("OutboundLink")],1),t._v(", the ES6/7 to ES5 transpiler, "),e("a",{attrs:{href:"https://babeljs.io/repl/",target:"_blank",rel:"noopener noreferrer"}},[t._v("try it out!"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("If you would like to use ES6/7 in your projects without having to worry about compatibility, you can use "),e("a",{attrs:{href:"https://nodejs.org/en/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Node"),e("OutboundLink")],1),t._v(" and "),e("a",{attrs:{href:"https://babeljs.io/docs/usage/cli/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Babel CLI"),e("OutboundLink")],1)]),t._v(" "),e("h3",{attrs:{id:"quick-setup-of-a-project-with-babel-for-es6-7-support"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#quick-setup-of-a-project-with-babel-for-es6-7-support"}},[t._v("#")]),t._v(" Quick setup of a project with Babel for ES6/7 support")]),t._v(" "),e("ol",[e("li",[e("a",{attrs:{href:"https://nodejs.org/en/download/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Download"),e("OutboundLink")],1),t._v(" and install Node")]),t._v(" "),e("li",[t._v("Go to a folder and create a project using your favourite command line tool")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v(" npm init\n\n")])])]),e("ol",[e("li",[t._v("Install Babel CLI")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v(" npm install "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("save"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dev babel"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("cli\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v(" npm install "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("save"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dev babel"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("preset"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("es2015\n\n")])])]),e("ol",[e("li",[t._v("Create a "),e("code",[t._v("scripts")]),t._v(" folder to store your "),e("code",[t._v(".js")]),t._v(" files, and then a "),e("code",[t._v("dist/scripts")]),t._v(" folder where the transpiled fully compatible files will be stored.")]),t._v(" "),e("li",[t._v("Create a "),e("code",[t._v(".babelrc")]),t._v(" file in the root folder of your project, and write this on it")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"presets"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"es2015"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),e("ol",[e("li",[t._v("Edit your "),e("code",[t._v("package.json")]),t._v(" file (created when you ran "),e("code",[t._v("npm init")]),t._v(") and add the "),e("code",[t._v("build")]),t._v(" script to the "),e("code",[t._v("scripts")]),t._v(" property:")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"scripts"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"build"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"babel scripts --out-dir dist/scripts"')]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),e("ol",[e("li",[t._v("Enjoy "),e("a",{attrs:{href:"https://babeljs.io/docs/learn-es2015/",target:"_blank",rel:"noopener noreferrer"}},[t._v("programming in ES6/7"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("Run the following to transpile all your files to ES5")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v(" npm run build\n\n")])])]),e("p",[t._v("For more complex projects you might want to take a look at "),e("a",{attrs:{href:"http://gulpjs.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Gulp"),e("OutboundLink")],1),t._v(" or "),e("a",{attrs:{href:"https://webpack.github.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Webpack"),e("OutboundLink")],1)]),t._v(" "),e("h4",{attrs:{id:"remarks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remarks"}},[t._v("#")]),t._v(" Remarks")]),t._v(" "),e("p",[t._v("Transpiling is the process of converting source code to source code, and this is a common activity in JavaScript development.")]),t._v(" "),e("p",[t._v("The features available in common JavaScript applications (Chrome, Firefox, NodeJS, etc.) often lag behind the latest ECMAScript specifications (ES6/ES2015, ES7/ES2016, etc.). Once a specification has been approved, it will most certainly be available natively in future versions of JavaScript applications.")]),t._v(" "),e("p",[t._v("Rather than waiting for new JavaScript releases, engineers can start writing code that will run natively in the future (future-proofing) by using a compiler to convert code written for newer specifications into code compatible with existing applications. Common transpilers include "),e("a",{attrs:{href:"https://babeljs.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Babel"),e("OutboundLink")],1),t._v(" and "),e("a",{attrs:{href:"https://github.com/google/traceur-compiler",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Traceur"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v('Transpilers can also be used to convert from another language like TypeScript or CoffeeScript to regular, "vanilla" JavaScript. In this case, transpiling converts from one language to a different language.')])])}),[],!1,null,null,null);a.default=r.exports}}]);