Export and import without Webpack: a simple example

Let's assume that you have the following folder structure:

├── index.html
├── export.js
├── import.js

To be able to import and export modules, include Babel.

Further, define both scripts as type = "text/babel" and data-type = "module". This allows to define a script as a module, and declare it as Babel type at the same time.

Let's define index.html to see how to do it:

<!DOCTYPE html>
    <meta charset = "utf-8">
    <title>Hello, world</title>
    <script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <p>Hello, world</p>
    <script src = "./export.js" type = "text/babel" data-type = "module"></script>
    <script src = "./import.js" type = "text/babel" data-type = "module"></script>

Let's export a JSON from export.js:

export default {
    "Erik": {
        "age": 30,
        "city": "Barcelona" 
    "Andrea": {
        "age": 27,
        "city": "Barcelona"

Now you can import the data from import.js:

import siblings from './export.js';

    Siblings ages are ${siblings['Erik'].age} and ${siblings['Andrea'].age}.

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.