Laravel 混合 js 组合所有 js 文件

Question

如何使用 laravel mix 将我所有的 js 文件合并到一个文件中？将下载的外部插件 js 文件和 CSS 文件直接保存在 public 目录中是一种好习惯吗？因为我们在资源文件夹中已经有一个 js 文件夹，当我们执行 npm run production 时，它正在编译并保存在 public 目录中，不确定这是否正确。

这是我的资源文件夹的样子：

我的 app.js 文件如下所示：

Answer 1

您可以通过使用 npm install jquery 将它们安装到 NPM 来包含这些库。然后在你的 bootstrap.js 文件中你会有类似的东西：

window.jQuery = window.$ = require('jquery');

这将使它在 window 中可用，然后您仍然只有一个 js 文件要包含在客户端（您编译的 app.js 文件）。

如果您确实有一个文件想要从您的主包中分离出来，并且它不是您通过 NPM 提取的文件，那么将它直接提交到 public 文件夹并不是一件坏事。我会将它们保留在 /resources/assets/js/vendor 中，然后使用 mix.copy 将它们移动到 /public/js/vendor 中。那只是因为我更喜欢我所有的工作都在 resources 中并且 public 是所有编译或复制的文件。

Answer 2

您可以使用 npm 安装 jquery 并像使用 jeff

一样安装

window.$ = require('jquery');

或者，如果您有自己的脚本想要包含，那么

把它放在vue实例的顶部

require('./jquery.js') //based on your picture it jquery and app.js are in same level 


window.vue = require('Vue')

这将由 npm 自动读取和编译。

Answer 3

您可以从 npm 添加它们，或者如果这些是像我这样的外部插件，您可以这样做

mix.js('resources/assets/js/app.js', 'public/js')
 .scripts([
          "path/plugin1.js",
          "path/plugin2.js",
           .......
         ], 'public/js/all.js').styles([
          "path/plugin1.css",
          "path/plugin2.css",
          .....
         ],'public/css/all.css');

您可以访问更多有用的信息：https://laravel.com/docs/5.6/mix

Laravel 混合 js 组合所有 js 文件

Laravel Mix js combining all js files

laravel

webpack

laravel-mix