babel
New [transformFileName] loader-specific option has been implemented.
REASON
A reason of implementing this feature is [VueJS TypeScript SFC] compilation trouble with the usage of [babel, babel-loader]. Issue environment: [email protected], [email protected]., [email protected], [email protected])
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' }
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.
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.
@alexandrklimov Hi Alex, Are you aware of a way to get babel-loader to understand that vue-loader gives it Typescript code? Best — Paul
Hi @asselinpaul
As far I know, if you don't use .vue files, babel-loader should be configured as usual.
Forgot to mention, I am using .vue files 😟 . It works fine for .ts. @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.
It's so sad but I can't sight any progress in resolving this annoying problem with any way solution.
@alexandrklimov let's see if this gets anywhere — I do see @danez 's point of using a function instead of the regex.
@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.
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.
Any update on this, I would also like to use the babel-loader for .vue files.
