将多个组件导入一行（原子设计 + Vue.JS）答案

【问题标题】：import multiple components into a single line (Atomic Design + Vue.JS)将多个组件导入一行（原子设计 + Vue.JS）
【发布时间】：2019-04-25 00:21:42
【问题描述】：

我正在使用 Vue.js 开发一个项目，并想应用原子设计方法，但我想以集群和更智能的方式导入组件

目前

import GridLayout from '@/components/bosons/GridLayout.vue'
import LocalStorage from '@/components/bosons/LocalStorage.vue'

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

import SearchForm from '@/components/molecules/SearchForm.vue'

我多么希望

import {
    GridLayout,
    LocalStorage
} from '@/components/bosons'

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

import {
    SearchForm
} from '@/components/molecules'

解决方案？我想在文件夹中放置一个 index.js

/bosons/index.js

/atoms/index.js

/molecules/index.js

并且 index.js 将导入所有组件并导出，所以它会像

import ButtonStyled from './ButtonStyled.vue'

export default {
  ButtonStyled
}

或

export { default as ButtonStyled } from './ButtonStyled.vue'

工作正常，但是这种方式还是静态的，每次新建组件都需要添加index.js，每次删除组件也需要从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

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

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

【问题讨论】：

尝试标记您使用的 javascript bundler，（我认为 Webpack 是默认的）因为您想要做的可能可以在 bundler 配置中完成。
这是什么意思？ but is not feasible, every component created or deleted the index.js needs to be changed - 你所说的“改变”是什么意思？我刚刚使用index.js 解决方案对此进行了测试，并且效果很好。
@MattOestreich 这样我是静态导入的，所以对于每个创建的组件我都必须将它添加到 index.js 中，如果我删除一个组件，还需要从 index.js 中删除，我需要index.js 动态导入文件夹内的所有组件，对不起我的英语不好
所以你想一键自动导入项目中的每一个 Vue 文件，不管它们位于哪个目录？我绝对不建议这样做，但你为什么要首先这样做呢？

标签： javascript regex vue.js vue-component atomic-design

【解决方案1】：

这是一个动态在文件夹中导入所有组件的解决方案，尽管导入语句是two而不是one强>行。

此解决方案的另一个缺点是您必须每次都导入整个组件文件夹，因为解构发生在第二行。如果您实际上不需要所有组件，这可能会导致性能问题。

步骤 1

我还在组件文件夹中使用了索引文件，例如在您的 bosons 文件夹中，添加包含以下内容的 index.js 文件：

const req = require.context(".", false, /\.vue$/);

const components = {};

req.keys().forEach(fileName => {
  if (fileName === "./index.js") return;
  const componentName = fileName.replace(/(\.\/|\.vue)/g, "");
  components[componentName] = req(fileName).default;
});

export default components;

这会将 .vue 文件添加到您可以导出的组件对象中。它不包括 index.js 文件（本身）。

第二步

在您要导入玻色子组件的文件中：

import bosons from "@/components/bosons";
const { GridLayout, LocalStorage } = bosons;

这会导入组件并将它们保存在变量中，以便您可以使用它们。

请注意，在我的解决方案中您不能这样做

import { GridLayout, LocalStorage } from "@/components/bosons";

因为 import {component} 语法看起来像解构但不是。它指的是看起来像“export const”的导出，但这是一个“导出默认”导出。

【讨论】：

我更新了我的问题，尽可能接近解决方案，请看一下，如果我能提供帮助
我想不出它是怎么做到的，因为据我所知，你不能在 javascript 中执行动态“导出 const”。正如马特所提到的，您想要做的事情非常不寻常，因此考虑不同的方法以及是否真的有必要像这样导入所有组件可能是一个好主意。如果你真的、真的、真的需要这样做，你可以在你的 vue 应用程序之外编写一个脚本来更改代码本身。

【解决方案2】：

我创建了一个 Plugin Webpack，一个非常适合那些使用 Atomic Design 方法的人的库，基本上它从一个目录中生成 exports named，也许这对其他人有帮助

Weback Plugin - named-exports

【讨论】：