Webpack loader API: Imperatively transpile code

Question

I am writing a Webpack loader that transpiles .vue files to React components:

https://github.com/LukasBombach/single-file-components

A .vue file can consist of a <template> <script> and <style> tag. As part of my implementation I want to imperatively load the <script> part and have it transpiled by Webpack for further processing. So if I have this .vue file:

<template>
  <div>hello world</div>
</template>

<script>
import something from "something";

export default {
  data() {
    return {
      baz: "baz"
    };
  }
};
</script>

I basically want to do this (dummy code for the purpose of explanation):

myLoader.js

function myLoader(source) {
  // should return everything between <script> and </script> as a string
  const scriptCode = getCodeInsideScriptTags(source); 

  // transpiledJsCode should be es5 code that has been transpiled by Webpack
  const transpiledJsCode = this.theWebpackFunctionIAmLookingFor(scriptCode);

  // Now I can process the transpiledJsCode 
}

Is there a way to do this? I found [this.loadModule][1] and this.callback but if I do this:

const request = `${this.loader.resourcePath}.js`;
this.loadModule(request);

it does try and walk through js loader but all it says it that it cannot find the .js file I am looking for. And If I do this:

const scriptCode = getCodeInsideScriptTags(source); 
this.loader.resourcePath += ".js";
this.loader.callback(null, scriptCode);

it does not actually transpile the script code but instead just returns it.

I am assuming the second thing I am doing is a good lead but maybe I am missing something.

Webpack loader API: Imperatively transpile code

0 Answers0