0

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

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

下载 js 和 css 文件，然后将 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，它给出了以下错误

ERROR 编译失败，出现 20 个错误

未找到这些依赖项：

./resources/assets/js/gridstack.js 中的 jquery- ui/data ./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/版本 jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse jquery-ui/widgets/draggable jquery-ui/widgets/droppable jquery-ui/widgets/resizable

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

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

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

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

我也做了一个npm cache clean，没有效果我还验证了我的 node 和 npm 版本，它们看起来还可以：

node v6.10.3
npm  v3.10.10

编辑 从需求中删除 ./ 并完全删除 jquery-ui （它已经加载）后，我设法从 npm 命令中不再出现错误。然而，gridstack 功能并不存在。我将我的源代码与 gridstack 的官方演示进行了比较，发现它们包含 2 个 gridstack js 文件：

<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 的全部功能？

编辑 似乎有效的是：

  1. 删除之前完成的所有更改，如 app.js 中的更改

  2. 我将 webpack.config.js 从 node_modules/laravel-mix 复制到我项目的根文件夹中

  3. 我添加了以下代码

    module.exports.resolve = { extensions, alias: { 'vue$': 'vue/dist/vue.common.js', 'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui' ) } };

  4. 在 webpack.mix.js 中，我添加了以下内容：

    mix.js('resources/assets/js/app.js', 'public/js') .copy('node_modules/gridstack/dist/gridstack.all.js','public/js');

  5. 在 package.json 我添加了：

    "devDependencies": { ... "gridstack": "^0.3.0" }

  6. 在命令行中我做了

    sudo npm 重建节点-sass

然后

sudo npm run dev

完成上述操作后，npm 正确编译了 mix, bun now，我在前端收到 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。我只是不明白。

任何人都可以尝试模拟我在做什么并告诉我他们是如何做到的吗？

4

1 回答 1

0

您需要通过asset() 包含gridstack，然后一切都会很愉快-对于此示例，文件位于/public/js/dashboard 中，例如（hoosuite 网格演示页面）

<!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>
于 2019-01-19T09:09:52.820 回答