Map组件文件夹中的.vue文件并将其导出为json

jljoyd4f  于 2023-03-09  发布在  Vue.js
关注(0)|答案(1)|浏览(125)

我正在尝试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文件.

vmpqdwk3

vmpqdwk31#

检查示例,它还递归扫描文件夹
请注意这种结构:

components
└───user
│   │   Card.vue
└───product
    │   Card.vue

如果来自不同文件夹的组件具有相同的名称,则它将覆盖文件并输出如下内容:
x一个一个一个一个x一个一个二个x

相关问题