You can elect to use Webpack and Babel to transpile and bundle and your JavaScript files into a single processed output file.

Babel configuration information.

The CodePen Editor will process your JavaScript files with Webpack using babel-polyfill and the babel-loader plugin with the React, es2015, and stage-0 presets. It is okay if you don’t know what this means (that’s kind of the point!), but you can be confident that this configration will enable you to use es2015 features, proposed es2016 and JSX in your JavaScript.

You will need to specify which of your files will be treated as the entry point for the bundling. Typically, this is the file that will require or import classes and functions from the other JavaScript files in your project.

You’ll be able to import from any JavaScript file in your project unless they have .min.js as part of their name. Named minified files are excluded from the Webpack process to increase processing speed.

How to use external JavaScript libraries with your Babel Project.

If you’re accustomed to building with es6 on your local dev setup, you may be used to having access to npm modules in your code. The Project Editor doesn’t support npm module use (yet) so you’ll need to include your pre-built external libraries as a script tag in your HTML to add them to the global namespace. From there, they can be used in your JavaScript files. To see an example of this, see the React Profile Template, where the the React and React DOM scripts are included in the index.html, so React and ReactDOM can be referenced in the project JavaScript.