Всем добрый день!
Не могу создать своё JS расширение.
Изучаю документацию на тему разработки собственных JS-расширений:
оздал папку для своего нового расширения: local/js/mymodule
Потом в консоли перешёл в эту папку local/js/mymodule, выполнил команду
Ответил на вопросы мастера установки (на скрине).
У меня автоматически создалась папка local/js/mymodule/mygrade
Внутри файл bundle.config.js а также папка src, внутри которой файл script.js
Содержимое файла bundle.config.js:
Содержимое файла src/script.js:
Далее в папке src я создал файл style.css:
Потом в консоли запустил команду
Появилась папка dist с содержимым:
mygrade.bundle.js:
И файл mygrade.bundle.js.map, а также файл mygrade.bundle.css:
Далее я попробовал на странице подключить своё расширение, и посмотреть - отработало ли хоть что-нибудь из него:
Перезагрузил страницу - но ничего не изменилось, тег H1 с текстом Hello world from ext - не появился.
Содержимое файла config.php:
Подскажите, что я делаю не так?
Скрины прикрепил
Не могу создать своё JS расширение.
Изучаю документацию на тему разработки собственных JS-расширений:
оздал папку для своего нового расширения: local/js/mymodule
Потом в консоли перешёл в эту папку local/js/mymodule, выполнил команду
| Код |
|---|
bitrix create |
Ответил на вопросы мастера установки (на скрине).
У меня автоматически создалась папка local/js/mymodule/mygrade
Внутри файл bundle.config.js а также папка src, внутри которой файл script.js
Содержимое файла bundle.config.js:
| Код |
|---|
module.exports = {
input: 'src/script.js',
output: {
js: 'dist/mygrade.bundle.js',
css: 'dist/mygrade.bundle.css'
},
namespace: 'BX.Mymodule',
browserslist: false
}; |
Содержимое файла src/script.js:
| Код |
|---|
import './style.css';
document.addEventListener("DOMContentLoaded", () => {
console.log('Hello world from ext');
document.querySelector("body").innerHTML = "<h1 class='hello-world'>Hello world from ext</h1>";
}); |
Далее в папке src я создал файл style.css:
| Код |
|---|
.hello-world {
font-size: 40px;
font-style: italic;
color: blueviolet;
} |
Потом в консоли запустил команду
| Код |
|---|
bitrix build |
Появилась папка dist с содержимым:
mygrade.bundle.js:
| Код |
|---|
/* eslint-disable */
this.BX = this.BX || {};
(function (exports) {
'use strict';
document.addEventListener("DOMContentLoaded", function () {
console.log('Hello world from ext');
document.querySelector("body").innerHTML = "<h1 class='hello-world'>Hello world from ext</h1>";
});
}((this.BX.Mymodule = this.BX.Mymodule || {})));
//# sourceMappingURL=mygrade.bundle.js.map |
И файл mygrade.bundle.js.map, а также файл mygrade.bundle.css:
| Код |
|---|
.hello-world {
font-size: 40px;
font-style: italic;
color: blueviolet;
} |
Далее я попробовал на странице подключить своё расширение, и посмотреть - отработало ли хоть что-нибудь из него:
| Код |
|---|
\Bitrix\Main\UI\Extension::load("mymodule.mygrade"); |
Содержимое файла config.php:
| Код |
|---|
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
return [
'css' => './mygrade.bundle.css',
'js' => './mygrade.bundle.js',
]; |
Подскажите, что я делаю не так?
Скрины прикрепил
