1
votes

Comment puis-je exporter dynamiquement des composants dans index.js?

Je travaille sur un projet avec nuxt.js et je souhaite implémenter la méthodologie de conception atomique

donc j'importe actuellement les composants comme celui-ci

import { ButtonStyled } from "@/components/atoms"

mais Je dois importer comme ceci

export default modules

plus je me rapprochais de ça,

const req = require.context('./', true, /\.vue$/)

const modules = {}

req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')
  modules[componentName] = req(fileName).default
})

export const { ButtonStyled, TextLead } = modules

/atoms/index.js

mais je suis toujours en train de définir les noms des variables d'exportation de manière statique, j'ai besoin de définir la dynamique en fonction des composants à l'intérieur du dossier

REMARQUE: je ne peux pas utiliser

import {
    ButtonStyled,
    TextLead,
    InputSearch
} from '@/components/atoms'

si j'utilise l'extrait de code ci-dessus, je ne pourrai pas importer comme j'en ai besoin, c'est-à-dire:

import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'

javascript node.js vue.js nuxt.js atomic-design

0 commentaires

3 Réponses :

0
votes

require.context est une fonction assez obscure dans Webpack, vous aurez des problèmes lors de l'exécution des tests unitaires. Mais, pour résoudre votre problème; Vous devrez importer le fichier index.js dans le main.js de votre projet.

Voici comment je le fais:

_globals.js

//...
import './components' // This imports in the index.js
//...

components/index.js

//...
import './_globals'
//...

main.js

// Globally register all base components prefixed with _base for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context('.', true, /_base-[\w-]+\.vue$/)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\/_base/, '').replace(/\.\w+$/, ''))
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

Ce façon dont vos composants chargés avec require.context () sont enregistrés en tant que composant vue et rendus disponibles globalement. Je conseille de n'utiliser que des composants globaux avec des composants qui seront beaucoup utilisés. Ne chargez pas un composant globalement si vous avez l'intention de ne l'utiliser qu'une seule fois.

Vous pouvez trouver un exemple fonctionnel ici -> https://github.com/IlyasDeckers/vuetiful/tree/master/src

Pour que vos tests unitaires fonctionnent avec jest, vous devra se moquer de require.context () . C'était vraiment pénible, mais cela peut être réalisé facilement en utilisant babel-plugin -transform-require-context

2 commentaires

comme mentionné dans la description de la question, j'utilise nuxt.js, donc je n'ai pas le fichier main.js et je ne veux pas enregistrer les composants globalement, cela n'a rien à voir avec ma question. J'ai besoin d'exporter des composants dans index.js dynamiquement, l'exportation est différente de l'enregistrement global, désolé pour mon mauvais anglais

J'ai mis à jour ma question au plus près de la solution, jetez un œil s'il vous plaît et si je peux vous aider

0
votes

J'essaie d'utiliser votre façon de faire cela, et je sais que vous avez fait une erreur à module.exports
module.exports ne peut pas utiliser l'importation, je pense que vous pouvez faire comme ça
atomes / index.js

import {test1,test2} from "@/components/atoms/index.js";

export default {
  components: {
    test1,
    test2
  }
};

où utiliser

import test1 from "./test1.vue";
import test2 from "./test2.vue";

export { test1, test2 };

ou index.js

import k from "@/components/atoms/index.js";
export default {
  components: {
    test1: k.test1,
    test2: k.test2
  }
};

7 commentaires

obtient toujours très détaillé, grand, objet composant, j'ai besoin d'une solution comme dans ma question `` `` components: {ButtonStyled: atoms.ButtonStyled, TextLead: atoms.TextLead, InputSearch: atoms.InputSearch} `` ``

ou vous pouvez utiliser ceci dans votre index.js :: import test1 de "./test1.vue"; importer test2 depuis "./test2.vue"; export {test1, test2};

et j'ai mis le nouveau code à la réponse, je n'ai aucun moyen d'exporter automatiquement tous les fichiers sous le dir

donc ce n'est pas une exportation dynamique, c'est statique, fixe

Je sais ce que vous voulez, mais je pense que ce n'est pas un moyen de le faire, les exportations ne nécessitent pas de nom dynamique, et les exportations par défaut ne peuvent importer que tout l'objet; J'ai vu des utilitaires sur NPM, ils utilisent la méthode statique pour le faire. vous devrez peut-être consulter l'article sur export sur MDN

J'ai mis à jour ma question au plus près de la solution, jetez un œil s'il vous plaît et si je peux vous aider

Je pense que ce n'est pas permis de faire ce que tu veux

0
votes

J'ai créé une bibliothèque qui fait tout cela pour moi, peut-être qu'elle aide d'autres personnes.

named-exports

0 commentaires