javascript - Webpack loader API：强制转换代码

Question

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

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);

它实际上并不转译脚本代码，而只是返回它。

我假设我正在做的第二件事是一个很好的领先，但也许我错过了一些东西。

标签： javascriptwebpackwebpack-loader