Babel/TS, file extension remains .ts

support
#1

Hi,

I’m using babel to transpile typescript using @babel/typescript together with the following code:

{{ range .Params.Scripts}}
  {{- $transpiled := resources.Get . | babel  -}}
  <script src="{{ $transpiled.Permalink }}"></script>
{{end}}

It works nicely, however the transpiled files are not renamed to .js and keep their .ts suffix. This then becomes a problem on my nginx server as the mime types don’t match. I can fix that easily, but ideally the transpiled files are suffixed with .js

Thanks

#2

This might be a Babel issue… not sure how it is included in Hugo. I found this stackexchange topic, there seems to be a command line parameter --out-file-extension that can take care of that.

Maybe though you have done that all and your babel just does not find it’s configuration file?

#3

tx for you reply.

Babel already uses .js for the transpiled files. I would also not be able to use that flag to force an extension as hugo is calling the CLI, or am i able to change the way the cli is called

#4

I have a partial that is creating my stylesheets. In it I am handing over command line parameters to PostCSS… Maybe that could be helpful for you. I don’t have babel in use yet.

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $style := resources.Get "sass/theme.scss" | resources.ToCSS $options | resources.PostCSS (dict "config" "postcss.config.js" "noMap" true) |  resources.Fingerprint "sha512" }}

The dict is creating a “dictionary” with option and value. The slice is a one-level array (my term :wink: ) and then it’s handed over to postcss in the second line.

I would expect the babel integration to function the same way.

#5

You can set the output name in the transformation but you probably also nees to define a new media type

#6

I tried the following, but it does not change the file extensions:

{{ range .Params.Scripts}}
  {{- $transpiled := resources.Get . | babel (dict "--extensions " ".ts" "--out-file-extension" ".js")   -}}
  <script src="{{ $transpiled.Permalink }}"></script>
{{end}}

Am i missing something?

I did notice in the hugo source code than in the case of toCSS the extension is changed within the Hugo source code (here). Perhaps the babel code is using the same filename for the output?

in the interim i’ve remapped ts to application/javascript inside my nginx conf

#7

No, I am. I forgot about my own API.

I wrote a little about it, including a workaround, here:

1 Like