Question

如何将第三方js文件添加到特定的刀片视图？

基本上我想在新项目的仪表板页面中添加gridstack功能。

我已经尝试从gridstack下载js和css文件，然后将gridstack.js放在项目的resources/assets/js/文件夹中，并将项目中的css文件放入其中。 s 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 / ./resources/assets/js/gridstack.js中的数据
   ./resources/assets/js/gridstack.js中的jquery-ui / disable-selection
   省略了18条相似的行

要安装它们，您可以运行：npm install --save jquery-ui / data   jquery-ui / disable-selection jquery-ui / focusable jquery-ui / form   jquery-ui / ie jquery-ui / keycode jquery-ui / labels jquery-ui / jquery-1-7   jquery-ui / plugin jquery-ui / safe-blur jquery-ui / scroll-parent   jquery-ui / tabbable jquery-ui / unique-id jquery-ui / version   jquery-ui / widget jquery-ui / safe-active-element jquery-ui / widgets / mouse   jquery-ui / widgets / draggable jquery-ui / widgets / droppable   jQuery的UI /部件/可调整大小的

当然，我试图运行npm install --save jquery-ui/data以查看它是否有效但不是：

npm ERR！许可被拒绝（公钥）致命：无法从远程存储库中读取请确保您拥有正确的访问权限并且存储库已存在。

如何在没有所有这些编译错误的情况下将简单的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 refference并再次运行npm ......完全相同的错误

另外，我在项目中使用npm安装了gridstack ......但我不知道如何直接使用它。我应该可以使用它，因为它已经安装了＃34;但是如何？

我也做了npm cache clean，没有效果我还验证了我的node和npm版本，它们似乎没问题：

node v6.10.3
npm  v3.10.10

修改从require中删除./后，在完全删除了jquery-ui之后（它已经加载了）我设法从npm命令中得到了更多的错误。然而，gridstack功能并不存在。我将我的源代码与official demo的gridstack进行了比较，发现它们包含2个js文件的gridstack：

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

但Laravel mix并不同意我添加额外要求。如果在/resources/assets/js/app.js，我会从npm再次收到错误我将以下内容

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

如何在Laravel 5.4项目中获得gridstack完整功能？

修改似乎有用的是：

删除之前完成的所有更改，例如app.js中的更改
我将webpack.config.js从node_modules / laravel-mix复制到我项目的根文件夹
我添加了以下代码

module.exports.resolve = { 扩展别名：{ ＆＃39; vue $＆＃39;：＆＃39; vue / dist / vue.common.js＆＃39;，＆＃39; jquery-ui＆＃39;：path.resolve（__ dirname，＆＃39; node_modules / jquery-ui / ui＆＃39;） } };
在webpack.mix.js中，我添加了以下内容：

mix.js（＆＃39; resources / assets / js / app.js＆＃39;，＆＃39; public / js＆＃39;） .copy（＆＃39; node_modules / gridstack / DIST / gridstack.all.js＆＃39;＆＃39;公共/ JS＆＃39）;
我补充道：

＆＃34; devDependencies＆＃34;：{ ... ＆＃34; gridstack＆＃34;：＆＃34; ^ 0.3.0＆＃34; }
sudo npm rebuild node-sass

然后

sudo npm run dev

在上面的内容之后，npm正确编译了mix，bun现在，我在前端得到一个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。我只是不明白。

任何人都可以尝试模拟我正在做的事情并告诉我他们是如何做的它？

Answer 1

您需要通过asset（）包括gridstack，然后一切都会很高兴-在此示例中，文件位于/ 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>

Laravel 5.4和Gridstack.js

1 个答案: