从目录中的文件导入模块
用es6,我可以像这样从一个文件导入多个导出:
import {ThingA, ThingB, ThingC} from 'lib/things';
不过,我喜欢每个文件都有一个模块的组织。 我最终得到像这样的import:
import ThingA from 'lib/things/ThingA'; import ThingB from 'lib/things/ThingB'; import ThingC from 'lib/things/ThingC';
我希望能够做到这一点:
import {ThingA, ThingB, ThingC} from 'lib/things/*';
或类似的东西,理解的约定,每个文件包含一个默认的导出,每个模块的命名与其文件相同。
这可能吗?
我不认为这是可能的,但afaik模块名称的解决scheme取决于模块加载器,所以可能有一个加载器实现支持这一点。
在那之前,你可以在lib/things/index.js
中使用一个中间的“模块文件”
export * from 'ThingA'; export * from 'ThingB'; export * from 'ThingC';
这将允许你做
import {ThingA, ThingB, ThingC} from 'lib/things';
答案中已经提供了一个主题的变体,但是这个怎么样:
在一Thing
,
export default function ThingA () {}
在things/index.js
,
export {default as ThingA} from './ThingA' export {default as ThingB} from './ThingB' export {default as ThingC} from './ThingC'
然后消耗其他地方的所有东西,
import * as things from './things' things.ThingA()
或者只消费一些东西,
import {ThingA,ThingB} from './things'
目前的答案提出了一个解决方法,但它的buging我为什么不存在,所以我创build了一个这样做的babel
插件。
安装它使用:
npm i --save-dev babel-plugin-wildcard
然后将其添加到您的.babelrc
与:
{ "plugins": ["wildcard"] }
请参阅回购了解详细的安装信息
这可以让你做到这一点:
import * as Things from './lib/things'; // Do whatever you want with these :D Things.ThingA; Things.ThingB; Things.ThingC;
再次, 回购包含进一步的信息究竟是什么,但这样做,避免了创buildindex.js
文件,也发生在编译时,以避免在运行时readdir
。
也可以用更新的版本完全像你的例子:
import { ThingsA, ThingsB, ThingsC } from './lib/things/*';
和上面一样工作。
我已经使用了它们几次(特别是用于构build大量对象将数据分割到许多文件(例如AST节点)),为了构build它们,我制作了一个小脚本(我刚刚添加到npm中,所以其他人可以使用它)。
用法(目前您需要使用babel来使用导出文件):
$ npm install -g folder-module $ folder-module my-cool-module/
生成一个文件,其中包含:
export {default as foo} from "./module/foo.js" export {default as default} from "./module/default.js" export {default as bar} from "./module/bar.js" ...etc
那么你可以使用这个文件:
import * as myCoolModule from "my-cool-module.js" myCoolModule.foo()
如果您不在A,B,C中导出默认值,但只是导出{},则可以这样做
// things/A.js export function A() {} // things/B.js export function B() {} // things/C.js export function C() {} // foo.js import * as Foo from ./thing Foo.A() Foo.B() Foo.C()