Estou trabalhando em um projeto nuxt/vue.js e aplicando a metodologia do design atomic, então eu terei muuuittos componentes, em diferentes pastas, exemplo:
├── components
│ ├── quarks
│ │ └── ...
│ ├── bosons
│ │ └── GridLayout.vue
│ │ └── ...
│ ├── atoms
│ │ └── ButtonStyle.vue
│ │ └── InputStyle.vue
│ │ └── ...
│ ├── molecules
│ │ └── ...
│ ├── organisms
│ │ └── ...
│ ├── templates
│ │ └── ...
└─────
eu gostaria de fazer importações nomeadas, exemplo:
import { ButtonStyle, InputStyle } from '@/components/atoms/'
mas pra isso dar certo eu precisaria ter um index.js dentro de cada pasta exportando componente por componente, exemplo
├── components
│ ├── atoms
│ │ └── ButtonStyle.vue
│ │ └── InputStyle.vue
│ │ └── index.js
└─────
e no index.js
export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as InputStyle } from './InputStyle.vue'
então tudo funciona!
Mas fazer esse trabalho manualmente pode ser uma tarefa muito cansativa... Toda vez que criar, deletar, renomear um componente, teria que atualizar o index.js
da sua respectiva pasta.
Então penso em fazer essa exportação de forma dinâmica.
Eu pensei em criar um Plugin do Webpack e utilizar os Hooks para executar algum script a cada build (que acontece quando um arquivo é alterado)
que faça esse trabalho de varrer as pastas dentro de components
e gerar um index.js
pra cada pasta
exportando os componentes.
Mas não faço ideia de como fazer esse script..
alguém poderia me ajudar?
Agradeço desde já!
index
? Basta importar diretamente do arquivo... Se você tá perdendo produtividade, não vejo motivo para se dar ao trabalho de fazer algo assim. PS: Minha opinião.ng g c
que cria um componente e possui uma opção onde você pode especificar um pacote de template (por padrão usa o do próprio Angular, mas você pode colocar o seu), não sei se o Vue tem um CLI, se não tiver, pode fazer um