Transpile a single JS file?
-
Hello all! I tried searching for an answer. I’m currently working on a solution.
I have an external non-Vue dependency that takes a config file. This config file is intended to be written in Vanilla JS - this is fine however more for compatibility and convenience I’d also like this file to be transpiled.
I’m not terribly familiar with Webpack unfortunately.
Right now I have
src/assets/module.config.js, it has an ES6 import statement. Without changes to quasar.conf.js loading assets/module.config.js just returns the raw file. I’ve tried extending the entrypoint in the webpack config and that didn’t help.I’ll still knock at it a bit but I’m a little lost here. Ideally I’d like to use Quasar to transpile that file as well, so I don’t have to add a separate gulp build step.
-
Check out the quasar.conf.js build->transpileDependencies setting.
-
@jeffatpf said in Transpile a single JS file?:
Check out the quasar.conf.js build->transpileDependencies setting.
Thanks for the response! That is for node_modules only it looks, but I might be able to glean from the quasar source and replicate it for my file.
-
@Zikeji For a quick-and-dirty, if you put it into the assets folder, it will be transpiled
-
@Hawkeye64 It’s in the assets folder and it doesn’t get transpiled - I think this is because I’m not requiring it anywhere that the webpack loader will transpile it though (from what I can tell from documentation). It gets loaded by javascript in the Vue component, but not with an import. I have to pass the URL to the external library to read it.
-
@Zikeji Oh, if you don’t require it somewhere then it will be “tree-shaken” regardless of getting transpiled.
-
@Hawkeye64 What is the proper way to require it" Using the require example from the documentation doesn’t work, adding an attribute to the div with the ~assets/config.js leaves that attribute as ~assets/config.js (was assuming it would resolve to the transpiled URL per documention?).
-
an anchor element didn’t work either, and oddly enough setting an image src resolves the src to [object Module]. Looks like I’m barking up the wrong tree
-
Truthfully, I have no clue. Webpack is one of those magical things, which is why I love Quasar so much. But, it’s good to get your hands dirty and figure these things occasionally. Unfortunately, I don’t have the time to help with that.
