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.

Log in to reply