Как я могу динамически экспортировать компоненты в index.js? - PullRequest
Новая
       36

Как я могу динамически экспортировать компоненты в index.js?

0 голосов
/ 25 апреля 2019

Я работаю над проектом с nuxt.js и хочу реализовать методологию атомарного проектирования

, поэтому в настоящее время я импортирую компоненты, подобные этому 

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

, но мне нужноимпортируйте как этот 

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

чем ближе я был к этому, 

/atoms/index.js

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

, но я все еще определяю имена переменных экспорта статически, мне нужно определить динамику на основекомпоненты внутри папки

ПРИМЕЧАНИЕ: я не могу использовать 

export default modules

, если я использую приведенный выше фрагмент кода, я не смогу импортировать его так, как мне нужно, а именно: 

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

Ответы [ 3 ]

0 голосов
/ 25 апреля 2019

Я пытаюсь использовать ваш способ сделать это, и известно, что вы допустили ошибку в module.exports
module.exports не может использовать импорт, я думаю, что вы можете сделать это
at atom / index.js 

const req = require.context("./", true, /\.vue$/);
const atoms = {};
req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, "$1");
  atoms[componentName] = req(fileName).default;
});
export default atoms;

в том месте, где использовать 

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

или index.js 

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

export { test1, test2 };

и где использовать подобное 

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

export default {
  components: {
    test1,
    test2
  }
};
0 голосов
/ 09 июля 2019

Я создал библиотеку, которая делает все это для меня, может быть, она помогает другим людям.

named-exports

0 голосов
/ 25 апреля 2019

require.context - довольно непонятная функция в Webpack, у вас будут проблемы при запуске юнит-тестов.Но, чтобы решить вашу проблему;Вам нужно будет импортировать файл index.js в main.js вашего проекта.

Вот как я это делаю:

_globals.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)
})

components / index.js 

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

main.js 

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

Таким образом, ваши компоненты, загруженные с помощью require.context(), регистрируются как vue-компонент и становятся доступными для всех.Я советую использовать только глобальные компоненты с компонентами, которые будут использоваться часто.Не загружайте компонент в глобальном масштабе, если вы собираетесь использовать его только один раз.

Рабочий пример можно найти здесь -> https://github.com/IlyasDeckers/vuetiful/tree/master/src

Чтобы ваши модульные тесты работали с Jest, вынужно будет издеваться require.context().Это была настоящая боль, но ее можно легко достичь с помощью babel-plugin-transform-require-context

...