How to integrate python-webpack-loader?

mjmare

Hi all,

I’m trying to include python-wegpack-loader (https://github.com/martim00/python-webpack-loader) into the Quasar config.
The goal is to use python in the Vue component’s script section. To this end the python-wegpack-loader uses the javascripthon transpiler to convert python to ES6.

Even though I don’t really know what I’m doing I have partial success. I can import python scripts into my Vue components and call the code. Pretty cool already. However I have not achieved my goal of using only python within the script section of the component.

This is my quasar.conf.js:

      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        });
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.py$/,
          loader: 'py-loader',
          options: {
            compiler: 'pj'
          }
        });
        // cfg.module.rules.push({
        //   test: /\.vue$/,
        //   loader: 'vue-loader',
        //   options: {
        //     loaders: {
        //       'py': require.resolve('py-loader')
        //     }
        //   }
        // });
      }

This works for the standalone python scripts (.py) but fails for this:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="py">
class HelloWorld(object):
    name = 'HelloWorld'
    def data(self):
        return {'msg': 'Hello from Python!'}
module.exports = HelloWorld()
</script>

The error is:

  11:15  error  Parsing error: Unexpected token, expected "{"

  1 | 
> 2 | class Component:
    |                ^
  3 |   def __init__(self):
  4 |       self['data'] = lambda: { 'best_lang': 'Python' }
  5 |

I think this indicates that the python code is interpreted as javascript.
I have tried to add a vue-loader section to quasar .conf.js (see commented out section above). Fails too.

Any pointers on how to convince Quasar/Vue to use the python loader? It would be such a timesaver for me to be able to use python (you may pity me ;-).

s.molinari

Don’t mean to be negative, but learning JavaScript would be easier. ducks and bows out of conversation :face_with_stuck-out_tongue_closed_eyes:

Scott

mjmare

Yeah, I’m trying, really. But coming from python JS is a mess. I’m really thankful for Quasar (and Vue) for enabling me to create a JS frontend. With some creative ESLint settings I can make it even make it look a bit like python. But since we are already compiling/transpiling all kinds of stuff, why not python? And I have the feeling I’m really close, but since I don’t really understand what’s going on with Webpack etc, I cannot make that final step.
I’m sure other pythonistas would like to see something like this.

s.molinari

No matter what issues you are currently having with programming in JavaScript, you really should continue to learn the language. It isn’t hard and once you get the core concepts of JavaScript’s prototypal system (and don’t mix the “class” keyword with proper OOP classes either, which it sounds like you might be doing) and you learn its boundries and of course, its quirks, the language becomes quite liberating.

If you stick to this path, I can see you scratching your head for a good long time trying to guess as to where a bug might be “stuck”, in the transpiling of your Python code to JavaScript, an error in your code, in the packages you are using or with the other technologies in the stack (like Webpack). It just isn’t a good idea, IMHO, to add extra uncertainty like that to your development process.

Scott

mjmare

Just biding my time until web assembly saves us all

No More Posting New Topics!

How to integrate python-webpack-loader?