Question

我想导入驻留在文件夹中的所有组件。有没有办法在不创建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
}

Answer 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"]
    }]
  ],

Answer 2

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

Answer 3

您可以使用异步import（）：

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')
  });
});

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

3 个答案: