wewowweb / laravel-mix-svelte

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

Use the mix babel configuration on Svelte files #10

Closed JoshuaCrewe closed 4 years ago

JoshuaCrewe commented 4 years ago

When compiling svelte files with Laravel Mix, apply the existing babel configuration options to the build step.

This is the minimum required to convince babel to parse svelte files. Addresses issue #7 where a more full dicussion has taken place.

Webpack loaders read from bottom to top which is why the order shows the babel-loader first. Any options that exist in Laravel Mix will get passed to both svelte-loader and babel-loader which makes it somewhat flexible.

Originally I had some exclusion rules in there for core-js and @babel but when testing this PR they were needed. To test it I have a project which was broken in IE but fixed with this configuration.

The .babelrc for that project is as follows :

{
    "presets": [["@babel/preset-env", {
        "targets": {
                     "browsers": [
                         "ie >= 11"
                     ]
                 },
        "useBuiltIns": "entry",
            "corejs": 3
    }]],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "wp.element.createElement"
        }]
    ]
}

As far as I am aware this won't break anything if there is no .babelrc so should slot in fine. I tested this with a reduced webpack.config.js and no .babelrc in the root.

What do you think? I'd like to do some more testing on other real world projects if this looks like it is the right direction for the project.