3

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á!

3
  • 2
    Por que você não deixa de criar esse arquivo 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. 6/07/2019 às 16:42
  • @LuizFelipe, pretendo me aperfeiçoar em Atomic Design, para esse tipo de arquitetura que tem muitos componentes e muitas importações, seria interessante uma sintaxe enxuta na hora de fazer importações, pois faria importações agrupadas por tipo de component, o objetivo é refatoração e legibilidade.
    – Yung Silva
    6/07/2019 às 16:47
  • Acho que o que quer é um CLI tipo do Angular, lá você tem o comando 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
    – Costamilam
    9/07/2019 às 1:49

1 Resposta 1

0

Utilizei um hook que é executado apenas uma única vez na compilação, com chokidar fico escutando alterações dentro do meu diretório de componentes.

compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
  // generates index.js
  // Watch a directory with chokidar 
});

Como irei utilizar isso em vários projetos, transformei isso em uma library, um plugin para webpack, quem quiser, segue o link!

Weback Plugin - named-exports

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .