Differences

This shows you the differences between two versions of the page.

--- java-script:babel [2023/08/03 02:39] – created odefta
+++ java-script:babel [2023/08/03 03:09] (current) – odefta
@@ Line 1: / Line 1: @@
 ====== Babel ======
+===== Use cases =====
 Babel was mainly used to transpile (compile) ES6 code into ES5 or older version of ES (ECMAScript). \\
@@ Line 11: / Line 13: @@
   - **Minification**: Babel can be used to minify your code, making the size of your JavaScript files smaller and thereby improving load times.
   - **Code Transformations**: Babel has plugins that allow for code transformations which can help you write cleaner or more efficient code. For instance, @babel/plugin-transform-runtime can help to avoid duplication in your compiled output.
+===== Install babel packages for a project =====
+This will create a **node-modules** folder containing a lot of modules:
+<code>
+npm install @babel/core @babel/preset-env @babel/node
+</code>
+Output:
+<code>
+added 248 packages, and audited 249 packages in 40s
+packages are looking for funding
+  run `npm fund` for details
+found 0 vulnerabilities
+</code>
+==== Create .babelrc ====
+Inside your project in the main directory create a file called **.babelrc**. \\
+This will indicate babel which presets to use to transpile the ES6 code in ES5 code:
+<code javascript .babelrc>
+{
+    "presets": ["@babel/preset-env"]
+}
+</code>
+===== Run our transpiled code (from ES6 to ES5) =====
+This command will transpile and run the code on the fly:
+<code>
+npx babel-node ./src/index.js
+</code>
+If the program has some arguments:
+<code>
+npx babel-node ./src/index.js 5 5
+</code>
+===== View transpiled code =====
+If we want to examine the transpiled code, we'll need to install the babel command line:
+<code>
+npm install @babel/cli
+</code>
+Output:
+<code>
+added 29 packages, and audited 278 packages in 5s
+packages are looking for funding
+  run `npm fund` for details
+found 0 vulnerabilities
+</code>
+Next, add a script entry in the package.json file:
+<code javascript>
+{
+  "scripts": {
+    "build": "babel src -d dist"
+  }
+}
+</code>
+Next, we can run:
+<code>
+npm run build
+</code>
+Transpiled code are now in the dist folder:
+<code>
+> build
+> babel src -d dist
+Successfully compiled 2 files with Babel (423ms).
+</code>