导入目录中的所有文件，无需显式指定每个文件答案

【问题标题】：Import all files in directory without having to explicitly specify each file导入目录中的所有文件，无需显式指定每个文件
【发布时间】：2018-09-30 22:28:19
【问题描述】：

我想导入位于文件夹中的所有组件。有没有办法做到这一点，而不必创建 index.js 文件并单独导入然后导出每个组件？有散装方式吗？

文件夹结构：

src/templates/
             Foo.vue
             Bar.vue
             Baz.vue
src/App.vue

在 App.vue 中我想导入 templates 文件夹中的所有组件：

import * as Templates from './templates'

除非我将index.js 文件放在./templates 文件夹中，否则上述方法不起作用：

// Do I have to import each component individually?
// Can I just bulk import all these?

import Default from './Default'
import Home from './Home'
import Agency from './Agency' 
import CaseStudies from './CaseStudies'
import Contact from './Contact'

export {
    Default,
    Home,
    Agency,
    CaseStudies,
    Contact
}

【问题讨论】：

也许 babel-wildcard 可以帮助npmjs.com/package/babel-plugin-wildcard ?
也许您可以将其表述为“导入通配符单文件组件 Vue 文件不起作用”。反对它的人可能不知道这是一种特定的文件类型。我赞成，这是一个有效的问题。
如果你使用Templates.Foo or Templates.Bar，我认为这可行

标签： vue.js ecmascript-6

【解决方案1】：

您可以批量导入

import { Default, Home, Agency, CaseStudies, Contact } from "./templates/*";

babel-plugin-wildcard

.babelrc

  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["wildcard", {
      "exts": ["js", "es6", "es", "jsx", "javascript", "vue"]
    }]
  ],

【讨论】：

【解决方案2】：

也许你可以使用require.context，你可以阅读vuejs官方文档：https://vuejs.org/v2/guide/components-registration.html

【讨论】：

【解决方案3】：

您可以使用异步导入（）：

import fs = require('fs');

然后：

fs.readdir('./someDir', (err, files) => {
  files.forEach(file => {
      const module = import('./' + file).then(m =>
        m.callSomeMethod();
      );
      // or const module = await import('file')
  });
});

【讨论】：

这仅在您使用 vue 服务器端时有效。在浏览器中您无权访问fs 模块
是的，这仅适用于服务器端（Node.js。