Laravel Mix js结合了所有js文件

Question

How do I combine all of my js files to a single file with laravel mix? and is it a good practice to directly keep the downloaded external plugins js files and CSS files in public directory? because we have a js folder already in resource folder and it's getting compiled and saved in public directory when we do npm run production , not sure if this is correct or not.

This is how my resource folder looks like :

And my app.js file looks like this :

Answer 1

You can include those libraries by installing them to NPM with npm install jquery for instance. Then in your bootstrap.js file you would have something like:

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

That would make it available in the window, and then you still have just one js file to include on the client (your compiled app.js file).

If you do have a file you want separate from your main bundle, and it isn't one you have pulled in through NPM, it's not a bad thing to commit it straight to the public folder. I would keep them in /resources/assets/js/vendor and then use mix.copy to move them into /public/js/vendor . Thats just because I prefer all of my work to be in resources and to have public be all compiled or copied files.

Answer 2

You can use npm to install jquery and do it like this same with jeff

window.$ = require('jquery');

OR but if you have your own script want to include then

just put it top on vue instance

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


window.vue = require('Vue')

this will automatically read and being compiled by the npm.

Answer 3

you can add them from npm , or if these are external plugins like my case you can do this

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');

for more useful information you can visit : https://laravel.com/docs/5.6/mix