如何动态导出 index.js 中的组件？

Question

我正在使用 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/, '')
  modules[componentName] = req(fileName).default
})

export const { ButtonStyled, TextLead } = modules

但我仍然是静态定义导出变量名，我需要根据文件夹内的组件定义动态

注意：我不能使用

export default modules

如果我使用上面的代码片段，我将无法导入我需要的方式，即：

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

Answer 1

require.context 是 Webpack 中一个相当晦涩的函数，在运行单元测试时你会遇到问题。但是，为了解决你的问题；您需要在项目的 main.js 中导入 index.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

轻松实现

Answer 2

我尝试用你的方式来做到这一点，并且知道你在 module.exports
处犯了一个错误 module.exports 不能使用 import ，我想你可以这样做
在 atoms/index.js

const req = require.context("./", true, /\.vue$/);
const atoms = {};
req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, "");
  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
  }
};

Answer 3

我创建了一个库来为我做这一切，也许它对其他人有帮助。

如何动态导出 index.js 中的组件？

How can I dynamically export components in index.js?

javascript

node.js

vue.js

atomic-design

nuxt.js

named-exports