You can elect to flip on JavaScript bundling in your Project. By doing so, you’re:

1. Running Babel over all the JavaScript in the selected entry file and all locally imported files.
2. The Babel processing includes JSX transformation (if you care to use it) into React.createElement().
3. Bundles everything together when the entry point file is saved.

Babel Configuration

The bundler is configured to automatically run Babel (you can’t bundle without Bable on CodePen Projects). We’re using the standard @babel/preset-env preset that Babel encourages, along with the preset for React, @babel/preset-react, since React and JSX usage is popular in Projects. We also include a CodePen-picked set of additional plugins, which exactly matches what we run in the Pen Editor.

babel({
  babelHelpers: 'bundled',
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-transform-react-constant-elements'
  ],
  presets: ['@babel/preset-env', '@babel/preset-react']
})

How to use external JavaScript libraries with your Babel Project

If you’re accustomed to building and bundling on a local development setup, you may be used to having access to npm packages in your code. You can use npm packages in CodePen Projects by using Skypack. Here’s an example of doing that.