Использование import и export в JS

[pavel1c]

Добрый день. Столкнулся с проблемой... ситуация следующая:
Есть кусок кода, который рисует квадрат на Canvas:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

class Rect{
    constructor(width, height, ctx){
        this.width = width ;
        this.height = height;
        this.ctx = ctx;
    }
    draw() {
        this.ctx.fillStyle = '#FFFAFA';
        this.ctx.fillRect(5, 5, this.width, this.height);
    }
}
var rect = new Rect(530, 300, ctx);
rect.draw();

все работает норм, квадрат рисует...

Теперь я хочу перенести класс Rect в отдельный файл, таким образом:

файл 1 (script.js)

import Rect from './rect';

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var rect = new Rect(530, 300, ctx);

rect.draw();

и файл 2 (rect.js)

class Rect{
    constructor(width, height, ctx){
        this.width = width ;
        this.height = height;
        this.ctx = ctx;
    }

    draw() {
        this.ctx.fillStyle = '#FFFAFA';
        this.ctx.fillRect(5, 5, this.width, this.height);
    }
}

export default Rect;

в этом случае не работает, и пишет такую ошибку:
Uncaught SyntaxError: Unexpected identifier

Я так понял, проблема с областью видимости, но не понятно как ее решить, и как нагуглить решение подскажите пожалуйста в какую сторону капать

[pavel1c]

на самом деле у меня вообще не работает этот impore и export,
файл 1

import {one} from './rect';
console.log(one);

файл 2 (rect.js)

export let one = 1;

Подскажите как заставить браузер понимать этот механизм?

[Naive]

Браузеры не умеют в импорт/экспорт, только серверный JS.
Для браузера надо сделать сборку проекта (babel, webpack, etc) и грузить склеенный файл JS.

[pavel1c]

Сообщение от Naive

Браузеры не умеют в импорт/экспорт, только серверный JS.
Для браузера надо сделать сборку проекта (babel, webpack, etc) и грузить склеенный файл JS.

Спасибо. Да уже понял что в эту сторону нужно капать... Просто недавно начал изучать JS и тут такое... не ожидал просто, что стока нюансов