我正在尝试Map组件目录中的所有.vue文件。并在根目录中创建.json文件。我的vue.config.ts文件如下所示。但我创建的方法没有运行。
function createComponentsMapJsonPlugin() {
return {
apply: (compiler) => {
compiler.hooks.done.tapPromise('CreateComponentsMapJsonPlugin', () => {
const componentsDir = path.join(__dirname, 'src/components')
const componentsMap = {}
const files = fs.readdirSync(componentsDir).filter(file => {
return file.endsWith('.vue') && file !== 'index.vue'
})
files.forEach(file => {
const name = file.replace('.vue', '')
componentsMap[name] = path.join(componentsDir, file).replace(/\\/g, '/')
})
return new Promise((resolve, reject) => {
const filePath = path.resolve(process.cwd(), 'componentsMap.json')
fs.writeFile(filePath, JSON.stringify(componentsMap), (err) => {
if (err) {
reject(err)
} else {
resolve(true)
}
})
})
})
}
}
}
function configureWebpack(config) {
const newConfig = { ...config }
newConfig.plugins.push(createComponentsMapJsonPlugin())
return newConfig
}
export default defineConfig({
plugins: [
vue(),
],
...
...
resolve: {
alias: {
"@": path.resolve(__dirname, "src/")
}
},
build: {
rollupOptions: {
output: {
format: 'es'
}
}
},
configureWebpack,
})
apply: () =>
没有调用.有没有更好的方法来实现Map组件文件夹并将其导出为.json文件.
1条答案
按热度按时间vmpqdwk31#
检查示例,它还递归扫描文件夹
请注意这种结构:
如果来自不同文件夹的组件具有相同的名称,则它将覆盖文件并输出如下内容:
x一个一个一个一个x一个一个二个x