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

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

alexandrklimov
Copy link

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'
}

    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'
}
@danez
Copy link
Member

danez commented Jan 4, 2019

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
Copy link
Author

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
Copy link

@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
Copy link
Author

Hi @asselinpaul

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

@asselinpaul
Copy link

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

@alexandrklimov
Copy link
Author

alexandrklimov commented Feb 13, 2019

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
Copy link
Author

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

@asselinpaul
Copy link

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

@alexandrklimov
Copy link
Author

alexandrklimov commented Feb 13, 2019

@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
Copy link

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

@asselinpaul
Copy link

asselinpaul commented Mar 19, 2019

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
Copy link

i have same problem...

@Jdruwe
Copy link

Jdruwe commented May 23, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants