Differences

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

--- java-script:babel [2023/08/02 23:55] – [Run our transpiled code (from ES6 to ES5)] odefta
+++ java-script:babel [2023/08/03 00:09] (current) – odefta
@@ Line 34: / Line 34: @@
 ==== Create .babelrc ====
-Inside your project in the main directory create a file called .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:
@@ Line 46: / Line 46: @@
 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>
@@ Line 51: / Line 57: @@
 </code>
-5 in this example are optional program arguments in this example.
+===== 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>