Javascript 网页包导出所有组件，无冗余_Javascript_Reactjs_Webpack

Javascript 网页包导出所有组件，无冗余

javascript reactjs webpack

Javascript 网页包导出所有组件，无冗余,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我有以下目录结构： - modules/ | |--- a |---- p.jsx |---- a_directory/not_to_export.jsx |-----q.jsx | |--- b |---- r.jsx |-----s.jsx

我有以下目录结构：

- modules/ |
           |--- a
                |---- p.jsx
                |---- a_directory/not_to_export.jsx
                |-----q.jsx
           |   
           |--- b
                |---- r.jsx
                |-----s.jsx
           |
           |--- c
                |---- t.jsx

一个简单的问题是-如何导出每个模块及其在webpack中的路径，以便在webbrowser中使用

示例：

require（'a/p.jsx'）

应返回对p模块的引用

更详细的目标：

每个顶级jsx都应被视为一个模块，例如：
```
a/p.jsx
```
，
```
a/q.jsx
```
，
```
b/r.jsx
```
，
```
b/s.jsx
```
，
```
c/t.jsx
```
所有这些模块实际上都应该使用它们的路径进行引用，比如：在b/r.jsx中，我想访问
```
a/p.jsx
```
编译成单个jsx的所有内容基本上都要求语句是同步的
如果可能，缓存生成
require应该被导出，就像在构建外部一样，我应该能够加载组件，例如：
```
require（“a/p.jsx”）
```
可以在构建外部使用，而不是只导出入口点

这种行为与brunch产生的行为非常相似，唯一的问题是brunch不支持条件require/import语句

每个顶级jsx都应被视为一个模块，例如：
```
a/p.jsx
```
，
```
a/q.jsx
```
，
```
b/r.jsx
```
，
```
b/s.jsx
```
，
```
c/t.jsx
```
所有这些模块实际上都应该使用它们的路径进行引用，比如：在
```
b/r.jsx
```
中，我想访问
```
a/p.jsx
```

要配置wepack解析绝对路径的方式，请参阅。您必须将模块文件夹添加到解析器。因此，在您的网页配置中添加：

module.exports = {
  //...
  resolve: {
    modules: ['node_modules', 'modules']
  }
};

我假设您的

modules

文件夹与您的

node\u modules

文件夹处于同一级别

编译成单个
```
jsx
```
的所有内容基本上都要求语句是同步的
需要出口

要生成与node js一起使用，请使用以下选项：

是的，这部分解决了解决问题的决心。我认为如果与

NamedModulesPlugin（）

结合使用，可以产生更好的解决方案，而不是更改解析器。如果模块按其路径导出，我们可能不需要修复解析器-我猜。@MadhurendraSachan它如何“部分”解决问题？您写道希望模块的子文件夹可以通过路径导入。你没有说你想说出他们的名字。这就是你要求的解决方案。当然，如果你想命名它们，可能还有其他（更好的）解决方案。你说的“按路径导出”是什么意思？很抱歉，我更新了这个问题<代码>应该导出require，就像在构建外部一样，我应该能够加载组件，例如：require（“a/p.jsx”）可以在构建外部使用，而不仅仅是导出entrypoint。，我也在为web环境构建它。尝试使用requirejs

module.exports = {
  target: 'node'
};