В 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>
