# Babel ## Common commands https://babeljs.io/docs/en/babel-cli/ ```bash npx babel src/jsx --out-dir src/js --source-maps --copy-files npx babel src/jsx --out-dir src/js --source-maps --watch ``` ### Install via [[npm]] Install [[Babel]] ```bash npm install --save-dev @babel/core @babel/cli ``` ### Compile and output to stdout ```bash npx babel script.js ``` ### Compile and output to file ```bash npx babel script.js --out-file script-compiled.js ``` ### Re-compile on change ```bash npx babel script.js --watch --out-file script-compiled.js ``` ### Compile with source maps - Information about source maps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ ### "Support for the experimental syntax 'jsx' isn't currently enabled" https://stackoverflow.com/questions/63005011/support-for-the-experimental-syntax-jsx-isnt-currently-enabled Install `preset-env` and `preset-react`: ```bash npm install --save-dev @babel/preset-env @babel/preset-react ``` - `preset-env` info: https://babeljs.io/docs/en/babel-preset-env > `@babel/preset-env` is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller! - `preset-react` info: https://babeljs.io/docs/en/babel-preset-react Then create a `.babelrc` file and add: ```json { "presets": ["@babel/preset-env", "@babel/preset-react"] } ``` ### Compile Directories ```bash npx babel src --out-dir lib ``` Compile the entire `src` directory and output it as a single concatenated file. ```bash npx babel src --out-file script-compiled.js ``` ### Ignore spec and test files ```bash `npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"` ```