wewowweb / laravel-mix-svelte

mix.svelte();
MIT License
68 stars 10 forks source link

How to make it compile only specific files? #14

Closed alan-zhang- closed 3 years ago

alan-zhang- commented 3 years ago

Hello,

When I add .svelte() to mix, it compiles all files ended with .js, but actually, I want it to process only a few files, how to do that?

Thanks a lot. It's a great extension to make our life easier to code svelte in Mix.

// Webpack.mix.js
// I want it compile only app.js, ignore super_campus.js

mix.js('resources/js/pages/super_campus.js', 'public/js') .vue()

mix.js('resources/js/app.js', 'public/js').svelte();
morpheus7CS commented 3 years ago

Hey Alan,

thanks for the kind words. I was a bit slow to respond to this one, but I will definitely check this out as I was under the impression that it already works as you've described.

Will let you know shortly.

Kind regards, g

morpheus7CS commented 3 years ago

Hey @alan-zhang-,

I was just about to test the functionality you have described, but I've misunderstood the issue the first time around.

The problem is not the laravel-mix-svelte extension as such.

Since you are compiling both Vue and Svelte Javascript in the same Laravel Mix file, running npx mix will compile all the files, going from top to bottom of the webpack.mix.js file.

What you could do, is create two separate files, webpack-vue.mix.js and webpack-svelte.mix.js`, then modify your build depending on what you would like to build.

Run: npx mix --mix-config=./webpack-vue.mix.jsfor vue files Run: npx mix --mix-config=./webpack-svelte.mix.jsfor svelte files

To make it easier, you could then stick these into the scripts section of your package.json like so:

"scripts": {
        "mix:svelte": "npx mix --mix-config=./webpack-svelte.mix.js",
        "mix:vue": "npx mix --mix-config=./webpack-vue.mix.js",
    },

Hope this helps!

Kind regards, g