Laravel 5.4 и Gridstack.js

Question

Laravel 5.4 и Gridstack.js

Как добавить сторонний js-файл в определенные виды блейдов?

По сути, я хочу добавить функциональность гридстака на страницу панели инструментов в моем новом проекте.

Я уже пытался загрузить файлы js и css из gridstack, затем я поместил gridstack.js в проект resources/assets/js/ папка и файлы CSS внутри проекта resources/assets/css/ папка

Следующим шагом будет загрузка файлов в микшер. Для этого я думал, что я мог бы просто пойти в /resources/assets/js/app.js и добавить библиотеку

require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");

затем я запустил npm run dev, который выдал следующие ошибки

ОШИБКА Не удалось скомпилировать с 20 ошибками
Эти зависимости не были найдены:
jquery-ui / data in./resources/assets/js/gridstack.js
jquery-ui / disable-selection в./resources/assets/js/gridstack.js
пропущено 18 похожих строк
Чтобы установить их, вы можете запустить: npm install --save jquery-ui/data jquery-ui/disable-selection jquery-ui/focusable jquery-ui/form jquery-ui/ т.е. jquery-ui / код ключа jquery-ui / tags jquery-ui/jquery-1-7 jquery-ui/ плагин jquery-ui / безопасное размытие jquery-ui / родитель прокрутки jquery-ui / tabbable jquery-ui / уникальный идентификатор jquery-ui / версия jquery-ui / widget jquery-ui / безопасный-активный-элемент jquery-ui / widgets / мышь jquery-ui / widgets / dragggable jquery-ui / widgets / droppable jquery-ui / widgets / изменяемый размер

Конечно, я пытался бежать npm install --save jquery-ui/data чтобы увидеть, работает ли он, и нет:

нпм ERR! В доступе отказано (publickey).
Неустранимый: Не удалось прочитать из удаленного хранилища.
Пожалуйста, убедитесь, что у вас есть правильные права доступа и хранилище существует.

Как я могу добавить простой js и css в свой проект без всех этих ошибок компиляции...?

Я также попробовал другой подход: удалил требования из вышеприведенного подхода, выбрал файл webpack.mix.js и сделал его похожим на это:

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
   .js('resources/assets/js/jquery-ui.min.js', 'public/js')
   .js('resources/assets/js/gridstack.js', 'public/js')
....

Я тогда побежал npm run dev только чтобы получить ту же ошибку сверху.

Что здесь не так? Я попытался удалить ссылку jquery-ui и снова запустить npm... точно такая же ошибка

Кроме того, я установил gridstack с помощью npm в своем проекте... но я не знаю, как его использовать напрямую. Я должен быть в состоянии использовать его, так как он "установлен", но как?

Я также сделал npm cache clean, без эффекта я также проверил мои версии узла и npm, они кажутся нормальными:

node v6.10.3
npm  v3.10.10

РЕДАКТИРОВАТЬ После удаления./ из require и после полного удаления jquery-ui (он уже был загружен) мне удалось больше не получать ошибок от команды npm. Однако функциональности гридстека просто нет. Я сравнил свои источники с официальной демонстрацией gridstack и увидел, что они содержат файлы js gridstack:

<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>

Но Laravel mix не согласен со мной, добавляя дополнительные требования. Я получаю ошибки снова из npm, если в /resources/assets/js/app.js я поставил следующее

require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js

Что я могу сделать, чтобы получить полную функциональность гридстака в моем проекте Laravel 5.4?

РЕДАКТИРОВАТЬ То, что казалось, работает:

удалить все сделанные ранее изменения, как в app.js
Я скопировал файл webpack.config.js из node_modules/laravel-mix в корневую папку моего проекта
Я добавил ниже код
module.exports.resolve = { extensions, псевдоним: { 'vue$': 'vue/dist/vue.common.js', 'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui'))} };
В webpack.mix.js я добавил следующее:
mix.js ('resources / assets / js / app.js', 'public / js').copy ('node_modules / gridstack / dist / gridstack.all.js', 'public / js');
в package.json я добавил:
"devDependencies": {... "gridstack": "^ 0.3.0"}
в командной строке я сделал
sudo npm перестроить node-sass

затем

sudo npm run dev

После того, как я сказал выше, npm правильно компилирует микс, теперь я получаю ошибку jQuery во внешнем интерфейсе:

исключение jQuery.Deferred: c.draggable не является функцией d.prototype.draggable @ http://myproject.com/js/gridstack.all.js:16:1395

Это указывает на вторую часть gridstack.all.js (в самом начале, где jquery определен... снова). Ошибка, похоже, указывает на то, что jquery загружается более одного раза. Но это не проблема в классическом приложении PHP.

Есть идеи, как заставить это работать? Стандартное приложение laravel требует по умолчанию Bootstrap, lodash и jquery, и когда я добавляю gridstack в проект, создается впечатление, что где-то есть второе требование для jquery. Я просто не понимаю

Может кто-нибудь попытаться смоделировать то, что я делаю, и сказать мне, как они это сделали?

0

laravel npm laravel-5.4 gridstack

Источник

user1137313 01 авг '17 в 11:48

0 ответов

Другие вопросы по тегам laravel npm laravel-5.4 gridstack

user9708285 19 янв '19 в 09:09 2019-01-19 09:09 · Answer 1 · 2019-01-19 09:09

Вам нужно включить gridstack через asset(), тогда все будет хорошо - для этого примера файлы находятся в /public/js/dashboard, например (демонстрационная страница сетки hootsuite)

<!DOCTYPE html>
<html>
<head>
  <title>Grid Demo</title>
  <link rel="stylesheet" href="css/dashboard/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
  <script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
  <script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
  <script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>

</head>
<body>
  <div class="header">
    <a href="#remove-row" class="button remove-row">-</a>
    <a href="#add-row" class="button add-row">+</a>
    <p>
      <a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
    </p>
  </div>
  <div class="grid-container">
    <ul id="grid" class="grid">
      <li class="position-highlight">
        <div class="inner"></div>
      </li>
    </ul>
  </div>
  <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>