Question

是否有可以采用.vue模板的工具：

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

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

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

并将其转换为.js文件，如下所示：

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

（不确定它对CSS有什么魔力，但它会做点什么。）

我正在尝试使用本机浏览器模块，这些模块运行良好，但我想使用.vue文件语法，因为它提供了一些不错的功能。我想避免使用像Webpack或Browserify这样的捆绑包。

我正在使用巴别塔。我有transform-vue-jsx插件，但无法处理.vue格式，只能转换JSX。

Answer 1

您可以使用vue-template-compiler来解析* .vue文件并提取相关部分。

我写了一个应该完成这项工作的节点脚本：

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

要将所有* .vue文件转换为* .vue.js，请在包含* .vue文件的目录中运行以下bash命令（假设您使用的是linux或macOS）：

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

这将导致以下转换：

<强> foo.vue

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

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

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

foo.vue.js（已生成）

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

你可能想要调整脚本，以便它处理提取样式（但是你想要处理它）并修复空白和类似的东西。

Answer 2

这是我对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!`);
          }
        );
      });
    });
  }
});

我将它用于我的打字稿代码的sonarcube静态分析，因为sonarcube目前不支持vue SFC。

没有清理操作，因为我正在gitlab管道中运行它，因此在管道处理完成后，它们都会自动清理。

谢谢：）

Answer 3

我已经建立了一个在线 vue 转换器，它允许您复制/粘贴您的 vue 文件并将其转换为上述 javascript。

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

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

3 个答案: