Question

我正在编写一个Webpack加载器，它将.vue文件转换为React组件：

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

.vue文件可以包含<template> <script>和<style>标签。作为实现的一部分，我希望强制加载<script>部分，并由Webpack对其进行转译以进行进一步处理。因此，如果我有这个.vue文件：

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

<script>
import something from "something";

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

我基本上想这样做（出于解释目的，使用虚拟代码）：

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 
}

有没有办法做到这一点？我找到了[this.loadModule][1]和this.callback，但如果这样做：

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

它确实尝试遍历js加载器，但所有信息都表明它找不到我正在寻找的.js文件。如果我这样做：

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

它实际上并没有翻译脚本代码，而只是返回了它。

我假设我正在做的第二件事是取得良好的领先优势，但也许我错过了一些东西。

Webpack loader API：命令式代码

0 个答案: