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

2024-04-12

我想导入文件夹中的所有组件。有没有一种方法可以做到这一点而无需创建index.js文件并单独导入然后导出每个组件?有批量的方法吗?

文件夹结构:

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

在 App.vue 中,我想导入所有组件templates folder:

import * as Templates from './templates'

除非我放置一个,否则上面的方法不起作用index.js文件输入./templates folder:

// 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
}

您可以批量导入

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

with babel-插件-通配符 https://github.com/vihanb/babel-plugin-wildcard

.babelrc

  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["wildcard", {
      "exts": ["js", "es6", "es", "jsx", "javascript", "vue"]
    }]
  ],
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

导入目录中的所有文件,无需显式指定每个文件 的相关文章

随机推荐