### Install Babel Core (Bun) Source: https://babeljs.io/docs/usage Installs the core Babel functionality package using Bun. ```bash bun add --dev @babel/core ``` -------------------------------- ### Install Babel Core, CLI, and Preset Env (Bun) Source: https://babeljs.io/docs/usage Installs the necessary Babel packages for core functionality, command-line interface, and environment preset using Bun. ```bash bun add --dev @babel/core @babel/cli @babel/preset-env ``` -------------------------------- ### Install Babel Core (npm) Source: https://babeljs.io/docs/usage Installs the core Babel functionality package using npm. ```bash npm install --save-dev @babel/core ``` -------------------------------- ### Install @babel/polyfill Source: https://babeljs.io/docs/usage Commands to install the @babel/polyfill package using different package managers. This polyfill needs to be saved as a regular dependency, not a dev dependency. ```npm npm install --save @babel/polyfill ``` ```yarn yarn add @babel/polyfill ``` ```pnpm pnpm add @babel/polyfill ``` ```bun bun add @babel/polyfill ``` -------------------------------- ### Install Babel Core, CLI, and Preset Env (npm) Source: https://babeljs.io/docs/usage Installs the necessary Babel packages for core functionality, command-line interface, and environment preset using npm. ```bash npm install --save-dev @babel/core @babel/cli @babel/preset-env ``` -------------------------------- ### Install Babel Core, CLI, and Preset Env (Yarn) Source: https://babeljs.io/docs/usage Installs the necessary Babel packages for core functionality, command-line interface, and environment preset using Yarn. ```bash yarn add --dev @babel/core @babel/cli @babel/preset-env ``` -------------------------------- ### Install Babel Core, CLI, and Preset Env (pnpm) Source: https://babeljs.io/docs/usage Installs the necessary Babel packages for core functionality, command-line interface, and environment preset using pnpm. ```bash pnpm add --save-dev @babel/core @babel/cli @babel/preset-env ``` -------------------------------- ### Install Babel Core (Yarn) Source: https://babeljs.io/docs/usage Installs the core Babel functionality package using Yarn. ```bash yarn add --dev @babel/core ``` -------------------------------- ### Babel Configuration Example Source: https://babeljs.io/docs/roadmap Illustrates a minimal Babel setup requiring core, a preset, and a runner. Mentions enabling compilation via a `compileJS` option in `babel.config.json`. ```json { "compileJS": true } ``` -------------------------------- ### Install Babel CLI and Core Source: https://babeljs.io/docs/usage Installs the necessary Babel packages (@babel/core and @babel/cli) as development dependencies using npm, yarn, pnpm, or bun. ```npm npm install --save-dev @babel/core @babel/cli ``` ```yarn yarn add --dev @babel/core @babel/cli ``` ```pnpm pnpm add --save-dev @babel/core @babel/cli ``` ```bun bun add --dev @babel/core @babel/cli ``` -------------------------------- ### Install Babel Preset Env Source: https://babeljs.io/docs/usage Installs the @babel/preset-env package, which allows Babel to automatically determine the necessary transformations based on target environments. ```npm npm install --save-dev @babel/preset-env ``` ```yarn yarn add --dev @babel/preset-env ``` ```pnpm pnpm add --save-dev @babel/preset-env ``` ```bun bun add --dev @babel/preset-env ``` -------------------------------- ### Install Babel Core (pnpm) Source: https://babeljs.io/docs/usage Installs the core Babel functionality package using pnpm. ```bash pnpm add --save-dev @babel/core ``` -------------------------------- ### Install Babel Presets with Bun Source: https://babeljs.io/docs/faq Installs the necessary Babel presets (env, react, stage-2) as development dependencies using Bun, streamlining the setup process for Babel 6. ```bash bun add babel-preset-env babel-preset-react babel-preset-stage-2 --dev ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-proposal-partial-application Command to install the @babel/plugin-proposal-partial-application plugin using Bun. ```shell bun add --dev @babel/plugin-proposal-partial-application ``` -------------------------------- ### Installation Source: https://babeljs.io/docs/babel-helper-environment-visitor Install the `@babel/helper-environment-visitor` package using npm, Yarn, pnpm, or Bun. ```bash npm install @babel/helper-environment-visitor ``` ```bash yarn add @babel/helper-environment-visitor ``` ```bash pnpm add @babel/helper-environment-visitor ``` ```bash bun add @babel/helper-environment-visitor ``` -------------------------------- ### Import core-js/stable for useBuiltIns: entry Source: https://babeljs.io/docs/usage An example of how to import 'core-js/stable' in the entry file when using '@babel/preset-env' with 'useBuiltIns: "entry"'. This ensures that all necessary ECMAScript features are polyfilled. ```javascript import"core-js/stable"; ``` -------------------------------- ### Example Code with useBuiltIns: usage Source: https://babeljs.io/docs/usage A JavaScript code snippet demonstrating the use of Promise.resolve().finally(). When configured with 'useBuiltIns: usage', Babel will automatically inject the required polyfill if the target environment does not support it. ```javascript Promise.resolve().finally(); ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-transform-export-namespace-from Installs the @babel/plugin-transform-export-namespace-from plugin using Bun. ```bash bun add --dev @babel/plugin-transform-export-namespace-from ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-proposal-partial-application Command to install the @babel/plugin-proposal-partial-application plugin using pnpm. ```shell pnpm add --save-dev @babel/plugin-proposal-partial-application ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-transform-sticky-regex Installs the @babel/plugin-transform-sticky-regex package as a development dependency using Bun. ```bash bun add --dev @babel/plugin-transform-sticky-regex ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-proposal-decorators Installs the @babel/plugin-proposal-decorators package as a development dependency using Bun. ```bash bun add --dev @babel/plugin-proposal-decorators ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-proposal-partial-application Command to install the @babel/plugin-proposal-partial-application plugin using Yarn. ```shell yarn add --dev @babel/plugin-proposal-partial-application ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-proposal-partial-application Command to install the @babel/plugin-proposal-partial-application plugin using npm. ```shell npm install --save-dev @babel/plugin-proposal-partial-application ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-transform-export-namespace-from Installs the @babel/plugin-transform-export-namespace-from plugin using pnpm. ```bash pnpm add --save-dev @babel/plugin-transform-export-namespace-from ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-transform-sticky-regex Installs the @babel/plugin-transform-sticky-regex package as a development dependency using pnpm. ```bash pnpm add --save-dev @babel/plugin-transform-sticky-regex ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-proposal-decorators Installs the @babel/plugin-proposal-decorators package as a development dependency using pnpm. ```bash pnpm add --save-dev @babel/plugin-proposal-decorators ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-transform-sticky-regex Installs the @babel/plugin-transform-sticky-regex package as a development dependency using npm. ```bash npm install --save-dev @babel/plugin-transform-sticky-regex ``` -------------------------------- ### Install @babel/plugin-proposal-export-default-from with Bun Source: https://babeljs.io/docs/babel-plugin-proposal-export-default-from Installs the plugin as a development dependency using Bun. ```bash bun add --dev @babel/plugin-proposal-export-default-from ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-transform-sticky-regex Installs the @babel/plugin-transform-sticky-regex package as a development dependency using Yarn. ```bash yarn add --dev @babel/plugin-transform-sticky-regex ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-proposal-decorators Installs the @babel/plugin-proposal-decorators package as a development dependency using npm. ```bash npm install --save-dev @babel/plugin-proposal-decorators ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-proposal-decorators Installs the @babel/plugin-proposal-decorators package as a development dependency using Yarn. ```bash yarn add --dev @babel/plugin-proposal-decorators ``` -------------------------------- ### Install Babel Arrow Functions Plugin Source: https://babeljs.io/docs/usage Installs the @babel/plugin-transform-arrow-functions package, which enables the transformation of ES6 arrow functions into ES5 compatible syntax. ```npm npm install --save-dev @babel/plugin-transform-arrow-functions ``` ```yarn yarn add --dev @babel/plugin-transform-arrow-functions ``` ```pnpm pnpm add --save-dev @babel/plugin-transform-arrow-functions ``` ```bun bun add --dev @babel/plugin-transform-arrow-functions ``` -------------------------------- ### Install @babel/template Source: https://babeljs.io/docs/babel-template Instructions for installing the @babel/template package using various package managers. ```bash npm install --save-dev @babel/template ``` ```bash yarn add --dev @babel/template ``` ```bash pnpm add --save-dev @babel/template ``` ```bash bun add --dev @babel/template ``` -------------------------------- ### Install @babel/runtime-corejs2 with Bun Source: https://babeljs.io/docs/babel-runtime-corejs2 Installs the @babel/runtime-corejs2 package as a dependency using Bun. ```bash bun add @babel/runtime-corejs2 ``` -------------------------------- ### Babel CLI Option Example Source: https://babeljs.io/docs/en/options Demonstrates how to pass configuration options to Babel using the command line interface, specifically showing the kebab-case conversion for options. ```bash npx babel --root-mode upward file.js # equivalent of passing the rootMode config option ``` -------------------------------- ### Babel CLI Option Example Source: https://babeljs.io/docs/options Demonstrates how to pass configuration options to Babel using the command line interface, specifically showing the kebab-case conversion for options. ```bash npx babel --root-mode upward file.js # equivalent of passing the rootMode config option ``` -------------------------------- ### Install @babel/plugin-proposal-export-default-from with pnpm Source: https://babeljs.io/docs/babel-plugin-proposal-export-default-from Installs the plugin as a development dependency using pnpm. ```bash pnpm add --save-dev @babel/plugin-proposal-export-default-from ``` -------------------------------- ### Installation Instructions Source: https://babeljs.io/docs/babel-plugin-proposal-discard-binding Provides commands for installing the @babel/plugin-proposal-discard-binding package using npm, Yarn, pnpm, and Bun. ```shell npm install --save-dev @babel/plugin-proposal-discard-binding ``` ```shell yarn add --dev @babel/plugin-proposal-discard-binding ``` ```shell pnpm add --save-dev @babel/plugin-proposal-discard-binding ``` ```shell bun add --dev @babel/plugin-proposal-discard-binding ``` -------------------------------- ### Install Babel Presets with Yarn Source: https://babeljs.io/docs/faq Installs the required Babel presets (env, react, stage-2) as development dependencies using Yarn, facilitating the setup of Babel 6 for modern JavaScript projects. ```bash yarn add babel-preset-env babel-preset-react babel-preset-stage-2 --dev ``` -------------------------------- ### Babel 7: Installing @babel/runtime and @babel/plugin-transform-runtime Source: https://babeljs.io/docs/v7-migration To use Babel's runtime helpers, install `@babel/runtime` as a dependency and `@babel/plugin-transform-runtime` as a dev dependency. This setup separates helpers from the core Babel transformation. ```shell # install the runtime as a dependency npm install @babel/runtime # install the plugin as a devDependency npm install @babel/plugin-transform-runtime --save-dev ``` -------------------------------- ### Package.json dependencies for Babel CLI Source: https://babeljs.io/docs/en/babel-cli Example of how @babel/cli and @babel/core dependencies appear in a project's package.json file after installation. ```json { "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0" } } ``` -------------------------------- ### Package.json dependencies for Babel CLI Source: https://babeljs.io/docs/babel-cli Example of how @babel/cli and @babel/core dependencies appear in a project's package.json file after installation. ```json { "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0" } } ``` -------------------------------- ### Install @babel/plugin-transform-runtime (bun) Source: https://babeljs.io/docs/babel-plugin-transform-runtime Installs the @babel/plugin-transform-runtime as a development dependency using Bun. ```bash bun add --dev @babel/plugin-transform-runtime ``` -------------------------------- ### Arrow Function Transformation Example Source: https://babeljs.io/docs/usage Demonstrates the transformation of an ES6 arrow function into an ES5 compatible function expression using Babel. ```javascript const fn = () => 1; // converted to var fn = function fn() { return 1; }; ``` -------------------------------- ### Install @babel/preset-stage-0 Source: https://babeljs.io/docs/babel-preset-stage-0 Commands to install the @babel/preset-stage-0 package as a development dependency using npm, Yarn, pnpm, and Bun. ```bash npm install --save-dev @babel/preset-stage-0 ``` ```bash yarn add --dev @babel/preset-stage-0 ``` ```bash pnpm add --save-dev @babel/preset-stage-0 ``` ```bash bun add --dev @babel/preset-stage-0 ``` -------------------------------- ### Babel Configuration with Browserslist Source: https://babeljs.io/docs/en/babel-preset-env Example Babel configuration using @babel/preset-env with Browserslist integration. This setup specifies 'entry' mode for polyfills and the corejs version. ```json { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3.22" } ] ] } ``` -------------------------------- ### Plugin Ordering Example Source: https://babeljs.io/docs/en/plugins Illustrates the order in which Babel applies plugins and presets, highlighting that plugins run first-to-last and presets run last-to-first. ```json { "plugins":["transform-decorators-legacy","transform-class-properties"] } ``` ```json { "presets":["@babel/preset-env","@babel/preset-react"] } ``` -------------------------------- ### Babel Configuration with Browserslist Source: https://babeljs.io/docs/babel-preset-env Example Babel configuration using @babel/preset-env with Browserslist integration. This setup specifies 'entry' mode for polyfills and the corejs version. ```json { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3.22" } ] ] } ``` -------------------------------- ### Install Babel Plugin Proposal Record and Tuple Source: https://babeljs.io/docs/babel-plugin-proposal-record-and-tuple Instructions for installing the Babel plugin for JavaScript Records and Tuples using npm or yarn. ```bash npm install --save-dev @babel/plugin-proposal-record-and-tuple yarn add --dev @babel/plugin-proposal-record-and-tuple ``` -------------------------------- ### Interactive Babel Explorer Example Source: https://babeljs.io/docs/roadmap Provides a link to an interactive example demonstrating concepts for Babel tooling, specifically an 'AST Explorer' like tool. ```html https://babel-explorer.netlify.app/ (click and hold the mouse in the bottom sector!) ``` -------------------------------- ### Babel Configuration Example Source: https://babeljs.io/docs/v7-migration Demonstrates the updated syntax for specifying presets and plugins in Babel's configuration file (babel.config.js), reflecting the need to include the '@babel/' scope. ```javascript module.exports={ presets:["@babel/env"], // "@babel/preset-env" plugins:["@babel/transform-arrow-functions"], // same as "@babel/plugin-transform-arrow-functions" }; ``` -------------------------------- ### Transformed Code with useBuiltIns: usage Source: https://babeljs.io/docs/usage The transformed version of the example JavaScript code when using '@babel/preset-env' with 'useBuiltIns: "usage"'. It shows the explicit import of the 'core-js' module for 'es.promise.finally' because the target environment (Edge 17) lacks this feature. ```javascript require("core-js/modules/es.promise.finally"); Promise.resolve().finally(); ``` -------------------------------- ### Install @babel/preset-stage-1 Source: https://babeljs.io/docs/babel-preset-stage-1 Commands to install the @babel/preset-stage-1 package as a development dependency using different package managers: npm, yarn, pnpm, and bun. ```npm npm install --save-dev @babel/preset-stage-1 ``` ```yarn yarn add --dev @babel/preset-stage-1 ``` ```pnpm pnpm add --save-dev @babel/preset-stage-1 ``` ```bun bun add --dev @babel/preset-stage-1 ``` -------------------------------- ### Installation Commands Source: https://babeljs.io/docs/babel-plugin-proposal-import-defer Provides commands for installing the `@babel/plugin-proposal-import-defer` package using various package managers: npm, Yarn, pnpm, and Bun. ```bash npm install --save-dev @babel/plugin-proposal-import-defer ``` ```bash yarn add --dev @babel/plugin-proposal-import-defer ``` ```bash pnpm add --save-dev @babel/plugin-proposal-import-defer ``` ```bash bun add --dev @babel/plugin-proposal-import-defer ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-transform-export-namespace-from Installs the @babel/plugin-transform-export-namespace-from plugin using npm. ```bash npm install --save-dev @babel/plugin-transform-export-namespace-from ``` -------------------------------- ### Babel Core Import Examples Source: https://babeljs.io/docs/babel-core Demonstrates different ways to import the Babel core functionality in JavaScript. ```JavaScript var babel =require("@babel/core"); import{ transform }from"@babel/core"; import*as babelfrom"@babel/core"; ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-transform-export-namespace-from Installs the @babel/plugin-transform-export-namespace-from plugin using Yarn. ```bash yarn add --dev @babel/plugin-transform-export-namespace-from ``` -------------------------------- ### Install @babel/cli and @babel/core with Bun Source: https://babeljs.io/docs/en/babel-cli Installs the Babel CLI and core Babel package as development dependencies using Bun. It is best practice to install these locally within your project. ```bash bun add --dev @babel/core @babel/cli ``` -------------------------------- ### Plugin Ordering Example Source: https://babeljs.io/docs/plugins Illustrates the order in which Babel applies plugins and presets, highlighting that plugins run first-to-last and presets run last-to-first. ```json { "plugins":["transform-decorators-legacy","transform-class-properties"] } ``` ```json { "presets":["@babel/preset-env","@babel/preset-react"] } ``` -------------------------------- ### Install @babel/cli and @babel/core with npm Source: https://babeljs.io/docs/en/babel-cli Installs the Babel CLI and core Babel package as development dependencies using npm. It's recommended to install these locally within your project. ```bash npm install --save-dev @babel/core @babel/cli ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-proposal-do-expressions Command to install the @babel/plugin-proposal-do-expressions package as a development dependency using Bun. ```bash bun add --dev @babel/plugin-proposal-do-expressions ``` -------------------------------- ### Install @babel/cli and @babel/core with Yarn Source: https://babeljs.io/docs/en/babel-cli Installs the Babel CLI and core Babel package as development dependencies using Yarn. Local installation is the recommended approach for project portability. ```bash yarn add --dev @babel/core @babel/cli ``` -------------------------------- ### Install @babel/plugin-proposal-record-and-tuple Source: https://babeljs.io/docs/babel-plugin-proposal-record-and-tuple Provides commands to install the Babel plugin using npm, Yarn, pnpm, and Bun. ```npm npm install --save-dev @babel/plugin-proposal-record-and-tuple ``` ```yarn yarn add --dev @babel/plugin-proposal-record-and-tuple ``` ```pnpm pnpm add --save-dev @babel/plugin-proposal-record-and-tuple ``` ```bun bun add --dev @babel/plugin-proposal-record-and-tuple ``` -------------------------------- ### Installation Commands Source: https://babeljs.io/docs/babel-plugin-transform-explicit-resource-management Provides installation instructions for the @babel/plugin-transform-explicit-resource-management plugin using various package managers including npm, Yarn, pnpm, and Bun. ```bash npm install --save-dev @babel/plugin-transform-explicit-resource-management ``` ```bash yarn add --dev @babel/plugin-transform-explicit-resource-management ``` ```bash pnpm add --save-dev @babel/plugin-transform-explicit-resource-management ``` ```bash bun add --dev @babel/plugin-transform-explicit-resource-management ``` -------------------------------- ### Install @babel/cli and @babel/core with Yarn Source: https://babeljs.io/docs/babel-cli Installs the Babel CLI and core Babel package as development dependencies using Yarn. Local installation is the recommended approach for project portability. ```bash yarn add --dev @babel/core @babel/cli ``` -------------------------------- ### Install @babel/cli and @babel/core with Bun Source: https://babeljs.io/docs/babel-cli Installs the Babel CLI and core Babel package as development dependencies using Bun. It is best practice to install these locally within your project. ```bash bun add --dev @babel/core @babel/cli ``` -------------------------------- ### Basic Babel CLI Usage Source: https://babeljs.io/docs/usage Demonstrates how to use Babel from the command line with the CLI tool. This typically involves specifying input files, output directories, and presets for transformation. ```bash # Example of using babel-cli (actual command not provided in text) # babel src --out-dir dist --presets=@babel/env ``` -------------------------------- ### Install @babel/helper-module-imports Source: https://babeljs.io/docs/babel-helper-module-imports Provides installation commands for @babel/helper-module-imports using npm, Yarn, pnpm, and Bun. ```bash npm install @babel/helper-module-imports --save ``` ```bash yarn add @babel/helper-module-imports ``` ```bash pnpm add @babel/helper-module-imports ``` ```bash bun add @babel/helper-module-imports ``` -------------------------------- ### Install @babel/cli and @babel/core with npm Source: https://babeljs.io/docs/babel-cli Installs the Babel CLI and core Babel package as development dependencies using npm. It's recommended to install these locally within your project. ```bash npm install --save-dev @babel/core @babel/cli ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-transform-async-generator-functions Command to install the `@babel/plugin-transform-async-generator-functions` package as a development dependency using Bun. ```shell bun add --dev @babel/plugin-transform-async-generator-functions ``` -------------------------------- ### Install @babel/plugin-syntax-import-meta Source: https://babeljs.io/docs/babel-plugin-syntax-import-meta Provides instructions for installing the @babel/plugin-syntax-import-meta package using various package managers like npm, yarn, pnpm, and bun. ```npm npm install --save-dev @babel/plugin-syntax-import-meta ``` ```yarn yarn add --dev @babel/plugin-syntax-import-meta ``` ```pnpm pnpm add --save-dev @babel/plugin-syntax-import-meta ``` ```bun bun add --dev @babel/plugin-syntax-import-meta ``` -------------------------------- ### Installation with Package Managers Source: https://babeljs.io/docs/babel-preset-flow Provides installation commands for @babel/preset-flow using npm, Yarn, pnpm, and Bun for development dependencies. ```bash npm install --save-dev @babel/preset-flow ``` ```bash yarn add --dev @babel/preset-flow ``` ```bash pnpm add --save-dev @babel/preset-flow ``` ```bash bun add --dev @babel/preset-flow ``` -------------------------------- ### Install @babel/runtime with Bun Source: https://babeljs.io/docs/babel-runtime Installs the @babel/runtime package as a project dependency using Bun. ```bash bun add @babel/runtime ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-transform-unicode-property-regex Installs the @babel/plugin-transform-unicode-property-regex package as a development dependency using Yarn. ```bash yarn add --dev @babel/plugin-transform-unicode-property-regex ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-transform-unicode-property-regex Installs the @babel/plugin-transform-unicode-property-regex package as a development dependency using npm. ```bash npm install --save-dev @babel/plugin-transform-unicode-property-regex ``` -------------------------------- ### Installation Commands Source: https://babeljs.io/docs/babel-plugin-proposal-async-do-expressions Provides commands for installing the @babel/plugin-proposal-async-do-expressions package using various package managers like npm, yarn, pnpm, and bun. ```npm npm install --save-dev @babel/plugin-proposal-async-do-expressions ``` ```yarn yarn add --dev @babel/plugin-proposal-async-do-expressions ``` ```pnpm pnpm add --save-dev @babel/plugin-proposal-async-do-expressions ``` ```bun bun add --dev @babel/plugin-proposal-async-do-expressions ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-transform-unicode-property-regex Installs the @babel/plugin-transform-unicode-property-regex package as a development dependency using pnpm. ```bash pnpm add --save-dev @babel/plugin-transform-unicode-property-regex ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-transform-unicode-property-regex Installs the @babel/plugin-transform-unicode-property-regex package as a development dependency using Bun. ```bash bun add --dev @babel/plugin-transform-unicode-property-regex ``` -------------------------------- ### Install @babel/preset-stage-2 Source: https://babeljs.io/docs/babel-preset-stage-2 Commands to install the @babel/preset-stage-2 package as a development dependency using different package managers. ```npm npm install --save-dev @babel/preset-stage-2 ``` ```yarn yarn add --dev @babel/preset-stage-2 ``` ```pnpm pnpm add --save-dev @babel/preset-stage-2 ``` ```bun bun add --dev @babel/preset-stage-2 ``` -------------------------------- ### Install @babel/plugin-syntax-jsx Source: https://babeljs.io/docs/babel-plugin-syntax-jsx Instructions for installing the @babel/plugin-syntax-jsx plugin using various package managers like npm, Yarn, pnpm, and Bun. ```bash npm install --save-dev @babel/plugin-syntax-jsx ``` ```bash yarn add --dev @babel/plugin-syntax-jsx ``` ```bash pnpm add --save-dev @babel/plugin-syntax-jsx ``` ```bash bun add --dev @babel/plugin-syntax-jsx ``` -------------------------------- ### Installation Commands Source: https://babeljs.io/docs/babel-plugin-transform-proto-to-assign Provides commands for installing the @babel/plugin-transform-proto-to-assign plugin using various package managers. ```npm npm install --save-dev @babel/plugin-transform-proto-to-assign ``` ```yarn yarn add --dev @babel/plugin-transform-proto-to-assign ``` ```pnpm pnpm add --save-dev @babel/plugin-transform-proto-to-assign ``` ```bun bun add --dev @babel/plugin-transform-proto-to-assign ``` -------------------------------- ### Install @babel/traverse Source: https://babeljs.io/docs/babel-traverse Instructions for installing the @babel/traverse package using various package managers. ```bash npm install --save @babel/traverse ``` ```bash yarn add @babel/traverse ``` ```bash pnpm add @babel/traverse ``` ```bash bun add @babel/traverse ``` -------------------------------- ### TypeScript to JavaScript Transformation Example Source: https://babeljs.io/docs/babel-preset-typescript Demonstrates the input TypeScript code and the resulting JavaScript output after transformation by @babel/preset-typescript. ```typescript const x:number=0; ``` ```javascript const x =0; ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-development Installs the @babel/plugin-transform-react-jsx-development package as a development dependency using Bun. ```bash bun add --dev @babel/plugin-transform-react-jsx-development ``` -------------------------------- ### Install @babel/plugin-syntax-top-level-await with Bun Source: https://babeljs.io/docs/babel-plugin-syntax-top-level-await Command to install the @babel/plugin-syntax-top-level-await package as a development dependency using Bun. ```bash bun add --dev @babel/plugin-syntax-top-level-await ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-development Installs the @babel/plugin-transform-react-jsx-development package as a development dependency using npm. ```bash npm install --save-dev @babel/plugin-transform-react-jsx-development ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-development Installs the @babel/plugin-transform-react-jsx-development package as a development dependency using Yarn. ```bash yarn add --dev @babel/plugin-transform-react-jsx-development ``` -------------------------------- ### Installation Commands Source: https://babeljs.io/docs/babel-helper-validator-identifier Commands to install the @babel/helper-validator-identifier package using different package managers. ```bash npm install @babel/helper-validator-identifier ``` ```bash yarn add @babel/helper-validator-identifier ``` ```bash pnpm add @babel/helper-validator-identifier ``` ```bash bun add @babel/helper-validator-identifier ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-development Installs the @babel/plugin-transform-react-jsx-development package as a development dependency using pnpm. ```bash pnpm add --save-dev @babel/plugin-transform-react-jsx-development ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-proposal-do-expressions Command to install the @babel/plugin-proposal-do-expressions package as a development dependency using pnpm. ```bash pnpm add --save-dev @babel/plugin-proposal-do-expressions ``` -------------------------------- ### Installation Source: https://babeljs.io/docs/babel-plugin-transform-react-inline-elements Instructions for installing the @babel/plugin-transform-react-inline-elements plugin using various package managers. ```npm npm install --save-dev @babel/plugin-transform-react-inline-elements ``` ```yarn yarn add --dev @babel/plugin-transform-react-inline-elements ``` ```pnpm pnpm add --save-dev @babel/plugin-transform-react-inline-elements ``` ```bun bun add --dev @babel/plugin-transform-react-inline-elements ``` -------------------------------- ### Installation with Bun Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-compat Installs the @babel/plugin-transform-react-jsx-compat plugin as a development dependency using Bun. ```shell bun add --dev @babel/plugin-transform-react-jsx-compat ``` -------------------------------- ### Installation Instructions Source: https://babeljs.io/docs/babel-plugin-transform-property-literals Provides commands for installing the @babel/plugin-transform-property-literals plugin using various package managers including npm, Yarn, pnpm, and Bun. ```bash npm install @babel/plugin-transform-property-literals --save-dev ``` ```bash yarn add @babel/plugin-transform-property-literals --dev ``` ```bash pnpm add @babel/plugin-transform-property-literals --save-dev ``` ```bash bun add @babel/plugin-transform-property-literals --dev ``` -------------------------------- ### Installation with Yarn Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-compat Installs the @babel/plugin-transform-react-jsx-compat plugin as a development dependency using Yarn. ```shell yarn add --dev @babel/plugin-transform-react-jsx-compat ``` -------------------------------- ### Installation with pnpm Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-compat Installs the @babel/plugin-transform-react-jsx-compat plugin as a development dependency using pnpm. ```shell pnpm add --save-dev @babel/plugin-transform-react-jsx-compat ``` -------------------------------- ### Installation with npm Source: https://babeljs.io/docs/babel-plugin-transform-react-jsx-compat Installs the @babel/plugin-transform-react-jsx-compat plugin as a development dependency using npm. ```shell npm install --save-dev @babel/plugin-transform-react-jsx-compat ```