是否将单文件.vue组件转换为JavaScript？
是否将单文件.vue组件转换为JavaScript？
提问于 2017-12-13 12:15:54
有没有工具可以接受这样的.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。
回答 3
Stack Overflow用户
发布于 2020-12-22 00:00:52
Stack Overflow用户
发布于 2019-10-14 14:31:47
这是我对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管道中运行它，所以在管道完成后，它会被自动清理。
谢谢:)
Stack Overflow用户
发布于 2021-10-20 19:39:08
以下是适用于Vue 3单文件组件的更新版本：
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);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47785382
复制相关文章
相似问题
腾讯云开发者
