将单文件 .vue 组件转换为 JavaScript？

Question

Is there a tool out there that can take a .vue template like this:

<template>
  <div>Hello, {{ thing }}</div>
</template>

<script>
  export default {
    data() { return { thing: 'World' }; }
  }
</script>

<style>
  div { background: red; }
</style>

And convert it into a .js file, like this:

export default {
  template: `
    <div>Hello {{ thing }}</div>
  `,
  data() {
    return {
      thing: 'World'
    }
  }
}

(Not sure what magic it'd do with the CSS, but it'd do something.)

I'm trying to use native browser modules, which work great, but I'd like to use the .vue file syntax since it offers some nice things. I'd like to avoid using a bundler like Webpack or Browserify.

I am using Babel. I have the transform-vue-jsx plugin, but that can't handle the .vue format, only converting the JSX.

Answer 1

You can utilize vue-template-compiler to parse the *.vue files and extract the relevant sections.

I've written a node script which should do the job:

convert.js

const compiler = require('vue-template-compiler');

let content = '';

process.stdin.resume();

process.stdin.on('data', buf => {
    content += buf.toString();
});

process.stdin.on('end', () => {
    const parsed = compiler.parseComponent(content);
    const template = parsed.template ? parsed.template.content : '';
    const script = parsed.script ? parsed.script.content : '';

    const templateEscaped = template.trim().replace(/`/g, '\\`');
    const scriptWithTemplate = script.match(/export default ?\{/)
        ? script.replace(/export default ?\{/, `$&\n\ttemplate: \`\n${templateEscaped}\`,`)
        : `${script}\n export default {\n\ttemplate: \`\n${templateEscaped}\`};`;

    process.stdout.write(scriptWithTemplate);
});

To convert all *.vue files to *.vue.js, run the following bash command inside the directory containing the *.vue files (assuming you're using linux or macOS):

find . -name '*.vue' -exec bash -c 'node convert.js < "{}" > "{}.js"' \;

This will result in the following conversion:

foo.vue

<template>
    <div>a</div>
</template>

<script>
    export default {
        name: 'foo',
    };
</script>

<style>
    /* Won't be extracted */
</style>

foo.vue.js (generated)

export default {
    template: `
        <div>a</div>
    `,
    name: 'foo',
};

You might want to tweak the script so that it deals with extracting the styles (however you want that to be handled) and fixing up whitespace and stuff like that.

Answer 2

I've put together an online vue converter which allows you to copy/paste your vue-file and convert it to said javascript.

https://fluxfx.nl/htools/vue-conv

Answer 3

This is my edit for Typescript

const parser = require("vue-template-compiler");
const fs = require("fs");
const path = require("path");
const glob = require("glob");

function getFiles(src, callback) {
  glob(src + "/**/*.vue", callback);
}

getFiles(path.join(__dirname, "../src"), function(err, filePaths) {
  if (err) {
    console.log("Error", err);
  } else {
    filePaths.forEach(filePath => {
      fs.readFile(filePath, "utf8", (err, data) => {
        if (err) throw err;
        const parsed = parser.parseComponent(data);
        if (!parsed.script) {
          return;
        }
        fs.writeFile(
          filePath.replace("vue", "ts"),
          parsed.script.content,
          err => {
            if (err) throw err;
            console.log(`The file ${filePath} has been created!`);
          }
        );
      });
    });
  }
});

I am using it for sonarcube static analyses of my typscript codes, since sonarcube does not support vue SFC for now.

There is no cleanup, because I am running it in gitlab pipeline so after pipeline is done, it is all cleaned automatically.

Thanks :)

Answer 4

Here's an updated version that works with Vue 3 single file components:

package.json:

{
      "name": "vue3-sfc-convert",
      "version": "3.0.0",
      "description": "",
      "main": "convert.js",
      "scripts": {
        "convert": "node convert.js"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "glob": "^7.2.0",
        "vue": "^3.2.20"
      },
      "devDependencies": {
        "@vue/compiler-sfc": "^3.2.20"
      }
}

convert.js

/**
 * convert.js
 * 
 * Convert Vue3 Single File Component to stand-alone script with template property
 * Run node convert.js in directory containing *.vue files
 * Output will be .vue files converted to .ts files with template property set to contents of SFC template block
 */
const sfcCompiler = require("@vue/compiler-sfc");
const fs = require("fs");
const glob = require("glob");

const COMPONENT_START = "export default defineComponent({";

function convertSFC(filePath) {
  try {
    fs.readFile(filePath, "utf8", (err, data) => {
      if (err) {
        console.log(err);
      } else {
        try {
          const parsed = sfcCompiler.parse(data);
          if (!parsed.descriptor) {
            return;
          }
          let templateEncoded = parsed.descriptor.template
              ? parsed.descriptor.template.content
                  .replace(/[\n\r]/gi, " ")
                  .replace(/\"/gi, '\\"')
                  .replace(/\s\s+/gi, " ")
              : null,
            templateLine = templateEncoded ? `\ntemplate: "${templateEncoded}",\n` : "",
            justScript = parsed.descriptor.script.content,
            startPos = justScript.indexOf(COMPONENT_START),
            scriptAndTemplate =
              justScript.substring(0, startPos + COMPONENT_START.length) +
              templateLine +
              justScript.substring(startPos + COMPONENT_START.length);
          fs.writeFile(
            filePath.replace("vue", "ts"),
            scriptAndTemplate,
            (err) => {
              if (err) throw err;
              console.log(`The file ${filePath} has been created!`);
            }
          );
        } catch (parseError) {
          console.log(parseError);
        }
      }
    });
  } catch (readError) {
    console.log(readError);
  }
}

glob("**/*.vue", {}, (err, files) => {
  console.log(`Convert ${files.length} SFCs...`);
  files.forEach((filePath) => {
    convertSFC(filePath);
  });
});