illiatovpeko
@illiatovpeko
Занимаюсь самообразованием в области WebDev

В чём проблема после конвертации через babel из es6?

В ES6 всё работает. Проблема возникает после конвертации и подключения конвертированных файлов. Думаю, что-то фундаментальное. Сейчас нужно уйти, решил спросить, чтобы время сэкономить.

Результат, в котором выдаётся ошибка "Uncaught ReferenceError: require is not defined at main.js:3":

'use strict';

var _products = require('./products.js'); <b>(вот здесь ошибка</b>)

var _products2 = _interopRequireDefault(_products);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// insert products into the page

_products2.default.forEach(function (item) {
    document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>\n    <div class="item ' + item.id + '">\n        <img src="' + item.link + '" alt="" class="img1">\n        <div class="description">\n            <h3 class="title">' + item.title + '</h3>\n            <p class="price">' + item.price + '</p>\n        </div>\n        <div class="buttons">\n            <button class="order">\u0417\u0430\u043A\u0430\u0437\u0430\u0442\u044C</button>\n            <button class="cart">\u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</button>\n        </div>\n    </div>\n</li>');
});
//list of products


Этот был файл с логикой, который берёт массив из этого:

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var products = void 0;

exports.default = products = [{
    title: "Диван Баден-Баден",
    price: "20 000 рублей",
    link: "src/img/baden-baden.jpg",
    id: "baden-baden"
}, {
    title: "Диван Дубай",
    price: "19 000 рублей",
    link: "src/img/dubay.jpg",
    id: "dubay"
}, {
    title: "Диван Лион",
    price: "21 000 рублей",
    link: "src/img/lion.jpg",
    id: "lion"
}, {
    title: "Диван Стефани",
    price: "40 000 рублей",
    link: "src/img/stephani.jpg",
    id: "stephani"
}];


***

ES6:
1) логика:

//list of products

import products from './products.js'

// insert products into the page

products.forEach(function(item) {
    document.querySelector('ul').insertAdjacentHTML('beforeend',

    `<li>
    <div class="item ${item.id}">
        <img src="${item.link}" alt="" class="img1">
        <div class="description">
            <h3 class="title">${item.title}</h3>
            <p class="price">${item.price}</p>
        </div>
        <div class="buttons">
            <button class="order">Заказать</button>
            <button class="cart">В корзину</button>
        </div>
    </div>
</li>`)
});


2) массив с данными:

let products;
 
 export default products = [
        
            {
                title: "Диван Баден-Баден",
                price: "20 000 рублей",
                link: "src/img/baden-baden.jpg",
                id: "baden-baden"
            },

            {
                title: "Диван Дубай",
                price: "19 000 рублей",
                link: "src/img/dubay.jpg",
                id: "dubay"
            },

            {
                title: "Диван Лион",
                price: "21 000 рублей",
                link: "src/img/lion.jpg",
                id: "lion"
            },

            {
                title: "Диван Стефани",
                price: "40 000 рублей",
                link: "src/img/stephani.jpg",
                id: "stephani"
            },


        ]


INDEX.HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="dist/css/main.css">
    <title>AbacPress</title>
</head>
<body>
    <main>
        <ul></ul>
    </main>
    <script type="module" src="dist/js/main.js"></script>
</body>
</html>
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы