Styjun

“Transitive verb” + interrupter+ “object”?

Zombie diet, why humans?

Was "I have the farts, again" broadcast from the Moon to the whole world?

Should I include salary information on my CV?

Should I hide continue button until tasks are completed?

How hard is it to sell a home which is currently mortgaged?

Why won't the ground take my seed?

Reverse of diffraction

Do we or do we not observe (measure) superpositions all the time?

How can I convince my reader that I will not use a certain trope?

Analog is Obtuse!

How to assign a Python list to a vim variable and escape its strings correctly

Could Sauron have read Tom Bombadil's mind if Tom had held the Palantir?

Why isn’t the tax system continuous rather than bracketed?

Why does the numerical solution of an ODE move away from an unstable equilibrium?

The use of "I" and "we" used in the same sentence and other questions

One folder two different locations on ubuntu 18.04

Dual statement category theory

How fast can a ship with rotating habitats be accelerated?

What does 2>&1 | tee mean?

Polish letters in ASME English template

Math PhD in US vs Master + PhD in Europe

“Faire” being used to mean “avoir l’air”?

Three column layout

Webpack loader API: Imperatively transpile code

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackImporting Vue Components with WebpackWebpack - ignore loaders in require()?ES6 import using at ('@') sign in path in a vue.js project using WebpackHow do Webpack '!' imports work?Webpack loader order misbehavedHow use vue-loader without vue-cliWebpack babel transpile to es5 doesn't quite workGetting empty object on importing from transpiled ES6 codeWebpack stopped transpiling React

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

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.

javascript webpack webpack-loader

share|improve this question

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges

add a comment | 

1

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.

javascript webpack webpack-loader

share|improve this question

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges

add a comment | 

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.

javascript webpack webpack-loader

share|improve this question

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges

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

<script>
import something from "something";

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

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 

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

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

share|improve this question

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges

share|improve this question

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges

asked Mar 25 at 12:04

LukasLukas

2,83344 gold badges3434 silver badges5959 bronze badges