CodePen Projects just dropped (well, beta did at least). If you haven't checked 'em out already you should take a few minutes, they're a kinda big deal.

If you have been using Projects, you may have noticed that you can use es2015 import statements, courtesy of webpack.

One thing that's different from a normal webpack setup though is you don't have any "real" third-party modules. You know, the ones where you run npm install or yarn add and they automatically pop into the node_modules folder.

Those are nice because instead of needing a relative path for your dependencies (e.g. ../modules/react) you can just use the name of the module (e.g. react).

You can sorta fake it though if you structure stuff right. All you need to do is make a folder called node_modules, and then inside of that make a file named after the module (e.g. react.js) with the module's code.

An example might look like this:

  ├── my-project.js
└── node_modules
    └── react.js
    └── react-dom.js

And then in my-project.js or anywhere else in your project (including within other folders) you can import React from 'react' without worrying about paths— just like webpack proper.

Here's a working demo Project.

1,580 1 18