New [transformFileName] loader-specific option has been implemented.

[alexandrklimov]

REASON

A reason of implementing this feature is [VueJS TypeScript SFC]
compilation trouble with the usage of [babel, babel-loader].
Issue environment: webpback@4.25.x, vue@2.5.x., babel@7.1.x,
babel-loader@8.0.x)

Ordinal *.ts files are compiled OK
but SFC - the [babel-loader] doesn’t understand that
[vue-loader] gives it TypeScript-code.

I know, that similar problem solved for the [ts-loader] by its option
[appendTsSuffixTo], but I haven't found any similar settings for
[babel-loader].

DESCRIPTION

babel-loader have two file names field in a loader's options object:

• filename
• sourceFilename

If I've found out correctly, the last one is strongly bound
to a physical resource (a file) and the first one is a logical name
in some sense.
Consequently, I change the fist file name options.
Well, in my test build that solution works without any negative impact.

I think that the [ts-loader] solves such problem by similar solution.

OPTION'S STRUCTURE

transformFileName:{
pattern: RegEx,
replace: 'string_of_content_instead_of_regex'
}

[danez]

Thanks for your PR.
I looked at ts-loader to see how the solve it. I think for the babel loader a more generic option makes sense in comparison to the appendTs(x)SuffixTo options.

Why did you choose to have an object with pattern and replacement? I would rather allow a function to be passed transformFileName: (currentFileName) => newFileName.

[alexandrklimov]

Hello @danez !

Thank you for your review.

I've chosen the RegExp-based approach instead of function-base one coz I thought just about a context of my task - file name transdormation for right compilation.
Moreover, I am not too professional in JS development and in Babel using particularly and I try to provide a solution is as concise as possible.

Of course, your approach with a mapper function is more generic and flexible.

[asselinpaul]

@alexandrklimov
Hi Alex,
Are you aware of a way to get babel-loader to understand that vue-loader gives it Typescript code?
Best —
Paul

[alexandrklimov]

Hi @asselinpaul

As far I know, if you don't use .vue files, babel-loader should be configured as usual.

[asselinpaul]

Forgot to mention, I am using .vue files 😟 . It works fine for .ts. @alexandrklimov

[alexandrklimov]

Briefly, without full description, problem is that there isn't any way to ask Babel to treated .vue-files as .ts ones, neither through babel-loader nor directly.
Or I just don't known about this way :)

This pull-request have been made for resolving this issue in tsc-style manner but it wasn't been applied at the first time.
Then I closed it accidentally and then after reopening I got current conflicts.

Though, I can fix these conflicts but there isn't any guarantee that the repository owner will apply my solution.

[alexandrklimov]

It's so sad but I can't sight any progress in resolving this annoying problem with any way solution.

[asselinpaul]

@alexandrklimov let's see if this gets anywhere — I do see @danez 's point of using a function instead of the regex.

[alexandrklimov]

@asselinpaul Yes, I remember about this suggestion and it's absolutely OK for me, but I couldn't find neither any remark about that solution in documentation nor any commit, since the last my converation with @danez.
Be frankly, I check this problem the last time about a month ago.

Suggestion about function I treated just as a suggestion - may be it was a hint? :)

If the function is a final repository owner's solution - it's OK for me. I can fix my code for it.
I just would like to know a direction to appropriated pull request.

[asselinpaul]

This is still relevant to me. Happy to help if my help is required.

[asselinpaul]

https://github.com/Realytics/fork-ts-checker-webpack-plugin let's me typecheck TypeScript inside of Vue SFC (.vue) files but babel-loader still freaks out at the TypeScript syntax.

[light0x00]

i have same problem...

[Jdruwe]

Any update on this, I would also like to use the babel-loader for .vue files.