【发布时间】：2018-01-08 06:29:30
【问题描述】：
如何将第三方 js 文件添加到特定刀片视图？
基本上，我想在我的新项目的仪表板页面中添加 gridstack 功能。
我已经尝试从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/禁用选择 jquery-ui/可聚焦 jquery-ui/form jquery-ui/ie jquery-ui/keycode jquery-ui/labels jquery-ui/jquery-1-7 jquery-ui/插件 jquery-ui/安全模糊 jquery-ui/scroll-parent jquery-ui/tabable jquery-ui/unique-id jquery-ui/version jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse jquery-ui/widgets/可拖动 jquery-ui/widgets/droppable jquery-ui/widgets/可调整大小
当然我尝试运行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 的official demo 进行了比较，发现它们包含 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 的全部功能？
编辑 似乎有效的是：
删除之前完成的所有更改，如 app.js 中的更改
我将 webpack.config.js 从 node_modules/laravel-mix 复制到我项目的根文件夹中
-
我添加了下面的代码
module.exports.resolve = { 扩展， 别名：{ '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 我添加了：
“开发依赖”：{ ... “gridstack”：“^0.3.0” }
-
在命令行中我做了
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。我就是不明白。
谁能尝试模拟我在做什么并告诉我他们是怎么做的 是吗？
【问题讨论】：
-
只是好奇.... 什么是反对票？
-
你的问题似乎是一大堵文字，如果我快速阅读问题我看不到一个明确的问题，它看起来是一个“我该如何解决这个问题”的问题，缺乏一个 MVCE。
-
你能在不使用
./的情况下尝试require语句，从而使用require('gridstack') -
我已经这样做了，并且成功了，但是，如果我这样做，Laravel 似乎不喜欢/解释 gridstack.js。当我运行 npm run dev 时，它没有更多错误，但功能不存在。我在 Laravel 之外做了一个测试，结果是一样的。它也需要其他 js 文件。它需要 gridstack.jQueryUI.js，它包含在 gridstack.all.js 中。那么如何将 gridstack.all.js 或 gridstack.jQueryUI.js 添加到我的项目中以使其具有功能？它不像使用 gridstack.js 那样工作
-
对不起，这个问题是一堵文字墙，因为我喜欢直截了当，而且它还包含一个很大的错误消息……我不能排除这一点。很难使它成为 MVCE，但我可以告诉你，以下演示有效：troolee.github.io/gridstack.js/demo/float.html 但我无法对其进行测试，因为 Laravel Mix 不符合这些 JS 要求。我希望有人之前添加了第三方 JS 文件，比如 gridstack 到他们的项目中
标签： gridstack laravel npm laravel-5.4 gridstack