web-dev-qa-db-ja.com

単一ファイルの.vueコンポーネントをJavaScriptに変換しますか？

次のような.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を変換するだけです。

javascriptvue.jsbabel
11
samanime

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',
};

スクリプトを微調整して、スタイルの抽出（ただし、それを処理したい場合）と空白の修正などを処理することをお勧めします。

6
Decade Moon

これは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は現在vue SFCをサポートしていないため、typscriptコードのsonarcube静的分析に使用しています。

Gitlabパイプラインで実行しているため、クリーンアップはありません。パイプラインが完了すると、すべて自動的にクリーンアップされます。

ありがとう:)

0
Luckylooke