Laravel Mix js结合所有js文件

Question

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

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

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

Answer 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是所有编译或复制的文件。

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