Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emit JS? #62

Closed
kaisermann opened this issue May 3, 2018 · 6 comments

Comments

@kaisermann
Copy link
Contributor

commented May 3, 2018

I'm currently making a svelte-webpack-template for a somewhat old webkit environment. With babel-preset-env, I'm trying to automatically polyfill my project's and svelte's generated code.

My first attempt was to call babel-loader after svelte-loader was done:

image

Unfortunately, it stopped working with the last updates of svelte-loader/svelte and now babel-loader tries to read the template file itself ( ¯\_(◕_◕)_/¯ ).

My next thought was probably a dumb question, but... would it make sense to "emit" the js generated by the svelte compiler?

(or maybe there's a better way to do this...)

@Rich-Harris

This comment has been minimized.

Copy link
Member

commented May 4, 2018

eek! I honestly have no idea. Hopefully someone else will...

@kaisermann

This comment has been minimized.

Copy link
Contributor Author

commented May 4, 2018

I was able to make it polyfill the svelte/shared.js again by enforcing my .babelrc.js to babel-loader. It wasn't parsing the shared.js because it's looking for a babel config inside the node_modules/svelte directory.

I'm gonna close this since I've already solved my main issue.

PS: regarding sveltejs/svelte#1359, if the output of svelte/compiler will be ES6 code, how would we handle ES5-only browsers?

PS²: @babel/preset-env was actually parsing and polyfilling the code generated by svelte. Its debug log just points to the original .html.

Edit:

If anyone is on the same boat as I was:

image

Not pretty, but it gets the job done 😸

@roemhildtg

This comment has been minimized.

Copy link

commented Jul 11, 2018

Wait, I might be running into this too. I'm trying to get babel to transpile the svelte code into IE11 friendly versions and the shared.js file still has arrow functions in it. I'm not really following what you're doing there, can you tell me how to fix this?

{
            test: /\.svelte$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                    sourceMap: true,
                },
            }, {
                loader: 'svelte-loader',
                options: {
                    emitCss: true,
                },
            }],
        },
@martynchamberlin

This comment has been minimized.

Copy link

commented Aug 23, 2018

@kaisermann Thanks a million for posting this code. I had the exact same problem and your code screenshot was the key. I needed to do the babel-loader in a use array, instead of just having a loader property on the rule.

@roemhildtg I think you're on the right track, you just need to make sure you're also testing for .js files and running the babel-loader on them too.

@martynchamberlin

This comment has been minimized.

Copy link

commented Aug 23, 2018

@roemhildtg To follow up on this, because I was having the same issue too just now. Since the shared.js file is coming from node_modules/svelte, you'll probably need to make sure your Babel is transpiling that directory. We almost always in our babel config exclude the node_modules wholesale, which is why it isn't picking up that shared.js file.

@borracciaBlu

This comment has been minimized.

Copy link

commented Sep 16, 2018

Case => function error not transpiled IE11

   // WRONG
   // missing /node_modules\/(?!svelte)/ for js file
   // thus can not pick up node_modules/svelte/shared.js
   {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/,
   },
   {
       test: /\.svelte/,
       exclude: /node_modules\/(?!svelte)/,
       use: [loaders.babel, loaders.svelte],
   },

   // CORRECT
   {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules\/(?!svelte)/,,
   },
   {
       test: /\.svelte/,
       exclude: /node_modules\/(?!svelte)/,
       use: [loaders.babel, loaders.svelte],
   },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.