Differences

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

--- java-script:babel [2023/08/02 23:44] – odefta
+++ java-script:babel [2025/01/02 18:22] (current) – external edit 127.0.0.1
@@ Line 15: / Line 15: @@
 ===== Install babel packages for a project =====
+This will create a **node-modules** folder containing a lot of modules:
 <code>
@@ Line 30: / Line 32: @@
 </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>