Я пытаюсь использовать sortablejs с CakePHP4 и сначала читаю ReadMe.
Итак, чтобы установить его, используйте npm install sortablejs --save Чтобы установить его, я нашел что-то, что сказало запустить.
Так что я пошел в cd cake_project/webroot/js и побежал npm install storablejs --save.
Два каталога node_modules и package-lock.json теперь установлены в webroot/js.
Все иерархии ниже.
/node_modules
|
|- /sortablejs
|- LICENSE
|- package.json
|- /dist
|- sortable.umd.js
|- sortable.umd.js.map
|- /modular
|- sortable.complete.esm.js
|- sortable.compsle.esm.js.map
|- sortable.core.esm.js
|- sortable.esm.js
|- sortable.esm.js.map
Я сделал именно то, что написано в README.
Я поставил следующее в template/view.php.
<ul id = "items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<?= $this->Html->script('view', ['block' => true]) ?>
Затем я добавил следующее в webroot/js/veiw.js.
import Sortable from "sortablejs";
let el = document.getElementById("items");
let sortable = Sortable.create(el);
Затем я получил сообщение об ошибке в консоли DevTools, говорящее Uncaught SyntaxError: Cannot use immport statemnt outside a module view.js:1 .
import Sortable from 'node_modules/sortablejs';
// ...
Проверьте журнал консоли.
Uncaught SyntaxError: Cannot use import statement outside a module view.js:1.
У меня точно такая же ошибка.
Я заглянул в каталог js в DevTools Sources и заметил, что sortablejs не существует.
В последней строке template/view.php добавьте <? = $this->Html->script('node_modules/sortablejs', ['block' => true]) ? > в последней строке template/view.php.
Я вызвал несуществующий файл с именем node_modules.js. Итак, <? = $this->Html->script('node_modules/sortablejs/, ['block' => true]) ? >. Теперь node_modules/sortablejs/.js называется.
Извини за это. Я больше ничего не могу сделать. Что я должен делать? Пожалуйста, помогите мне.
🤔 А знаете ли вы, что...
JavaScript позволяет создавать мобильные приложения для iOS и Android с использованием фреймворков, таких как React Native и NativeScript.
Прежде всего, модули JavaScript поддерживаются не во всех браузерах, поэтому, если вы не знаете, что ориентируетесь только на браузеры, которые их поддерживают, вы не можете использовать синтаксис import, и, как указано в сообщении об ошибке, это должно быть используется в самом модуле.
Поскольку вы еще не знакомы со всеми этими вещами, ES6, модулями, сборщиками и т. д., вы, вероятно, пока захотите использовать библиотеку UMD, которую можно использовать без импорта и тому подобного.
Предполагая, что папка node_modules будет находиться в вашей папке webroot, правильным путем к библиотеке UMD будет полный корневой относительный URL-адрес, например:
/node_modules/sortablejs/dist/sortable.umd.js
$this->Html->script('/node_modules/sortablejs/dist/sortable.umd.js', ['block' => true])
Затем вы можете напрямую использовать библиотеку, как в примерах на главной странице:
new Sortable(swapDemo, {
swap: true, // Enable swap plugin
swapClass: 'highlight', // The class applied to the hovered swap item
animation: 150
});
Я бы предложил установить модули за пределами папки webroot, а затем скопировать или создать символическую ссылку в вашу папку webroot, в идеале как часть скрипта сборки.
Примеры в репозитории GitHub, скорее всего, предназначены для использования в контексте таких упаковщиков, как Webpack, которые будут разрешать импорт. Использование модулей в браузере будет выглядеть немного иначе, примерно так:
<script type = "module">
import Sortable from '/node_modules/sortablejs/modular/sortable.complete.esm.js';
const el = document.getElementById('items');
const sortable = Sortable.create(el, {
swap: true, // Enable swap plugin
swapClass: 'highlight', // The class applied to the hovered swap item
animation: 150
});
</script>