文件结构:使用index.js文件级联访问子模块或子文件

时间:2021-10-25 23:58:13
modules/
   |
   |--- index.js
   |
   |--- module1.js
   |
   └--- module2/
           |
           |--- index.js
           |
           |--- component1.js
           |
           └--- component2.js

Using the structure above, I can access module1.js by using the following code;

使用上面的结构,我可以使用以下代码访问module1.js;

var modules = require('./modules') // or import modules from './modules'
console.log(modules.module1) 

However I cannot access to component1 by the following code;

但是我无法通过以下代码访问component1;

var modules = require('./modules') // or import modules from './modules'
console.log(modules.module2.component1)

When trying the code, the system throws Cannot read property 'component1' of undefined error. So, module2\index.js is not installed.

在尝试代码时,系统抛出无法读取未定义错误的属性“component1”。因此,未安装module2 \ index.js。

Is there any chance to access component1 and component2 by using modules definition?

有没有机会通过使用模块定义访问component1和component2?

2 个解决方案

#1


0  

To achieve this you will have to do the following in the index files throughout.

要实现此目的,您必须在索引文件中执行以下操作。

modules/index.js

module.exports = {
    module1: require('./module1'),
    module2: require('./module2')
}

modules/module2/index.js

module.exports = {
    component1: require('./component1'),
    component2: require('./component2')
}

#2


0  

Edit

I guess ES7 await method overcome this issue with a using like the following;

我想ES7等待方法通过如下使用来克服这个问题;

var modules = await require('./modules')
console.log(modules.module2.component1)

Original answer

The problem is that; Javascript codes work asynchronous.

问题是; Javascript代码异步工作。

At the first level is not a problem when defining to a variable. But at the second level needs some time to get and load the module from the depth.

在定义变量时,第一级不是问题。但是在第二级需要一些时间来从深度获取和加载模块。

Waiting to load the modules and then defining the components is nonsense in particularly when working on another Javascript platform like React-Native or one else platform which has been built on Javascript language.

等待加载模块然后定义组件是无稽之谈,尤其是在使用其他Javascript平台(如React-Native)或其他基于Javascript语言构建的平台时。

#1


0  

To achieve this you will have to do the following in the index files throughout.

要实现此目的,您必须在索引文件中执行以下操作。

modules/index.js

module.exports = {
    module1: require('./module1'),
    module2: require('./module2')
}

modules/module2/index.js

module.exports = {
    component1: require('./component1'),
    component2: require('./component2')
}

#2


0  

Edit

I guess ES7 await method overcome this issue with a using like the following;

我想ES7等待方法通过如下使用来克服这个问题;

var modules = await require('./modules')
console.log(modules.module2.component1)

Original answer

The problem is that; Javascript codes work asynchronous.

问题是; Javascript代码异步工作。

At the first level is not a problem when defining to a variable. But at the second level needs some time to get and load the module from the depth.

在定义变量时,第一级不是问题。但是在第二级需要一些时间来从深度获取和加载模块。

Waiting to load the modules and then defining the components is nonsense in particularly when working on another Javascript platform like React-Native or one else platform which has been built on Javascript language.

等待加载模块然后定义组件是无稽之谈,尤其是在使用其他Javascript平台(如React-Native)或其他基于Javascript语言构建的平台时。