Laravel Mix js 结合所有 js 文件答案

【问题标题】：Laravel Mix js combining all js filesLaravel Mix js 结合所有 js 文件
【发布时间】：2018-10-22 05:56:54
【问题描述】：

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

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

我的 app.js 文件看起来像这样：

【问题讨论】：

标签： laravel webpack laravel-mix

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

你可以从 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

【讨论】：

所以就像 plugin1.js 和 plugin2.js 将组合在一起并作为 all.js 保存在 public/js 文件夹中一样？还有一件事，如果我通过 npm 安装一个包它驻留在哪里我的意思是位置？
在你的 node_modules 文件夹中

【解决方案3】：

你可以使用 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 自动读取和编译。

【讨论】：