New [transformFileName] loader-specific option has been implemented. #738
Conversation
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-component - 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
Webpack's 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.
OPTION'S STRUCTURE
transformFileName:{
pattern: RegEx,
replace: 'string_of_content_instead_of_regex'
}
|
Thanks for your PR. Why did you choose to have an object with pattern and replacement? I would rather allow a function to be passed |
|
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. Of course, your approach with a mapper function is more generic and flexible. |
|
@alexandrklimov |
|
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. This pull-request have been made for resolving this issue in tsc-style manner but it wasn't been applied at the first time. 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. 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. |
|
This is still relevant to me. Happy to help if my help is required. |
|
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. |
|
i have same problem... |
|
Any update on this, I would also like to use the babel-loader for .vue files. |
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].
babel-loader have two file names field in a loader's options object:
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.
transformFileName:{
pattern: RegEx,
replace: 'string_of_content_instead_of_regex'
}