Блог

Я пытаюсь использовать 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 Вызывается Now .

Извините за это. Я больше ничего не могу сделать. Что мне делать? Пожалуйста, помогите мне.

Прежде всего, модули 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>