创建相对于当前目录的webpack路径

Question

问题：

我正在使用Rails 5.0和Webpacker，我正在尝试设置我们的初始Webpack配置。在Rails + Webpacker中，Webpack为app/javascript/packs文件夹中的每个项目生成不同的构建文件。有没有办法获得这些Webpack＆＃34;包＆＃34;根据包含文件夹的文件解析模块的不同路径？

问题：

导入语句中路径的冗余部分导致导入如：

主/页/ home.js：

import Engine from 'main/engine'
import Routes from 'main/engine/routes.js' 

dev_panel /页/ home.js：

import Engine from 'dev_panel/engine'
import Routes from 'dev_panel/engine/routes.js' 

等...

当然，这对于每个文件和子目录来说都是复杂的。这不仅单调，而且使文件和代码的重新组织成为一个令人头疼的问题。

期望的模式：

主/页/ home.js：

// but still refers to /main/engine/routes.js
import Engine from 'engine'
import Routes from 'engine/routes.js' 

dev_panel /页/ home.js：

// but still refers to /dev_panel/engine/routes.js
import Engine from 'engine'
import Routes from 'engine/routes.js' 

等...

结构示例：

app/javascript
├── packs
│   ├── dev_panel.js
│   ├── admin_panel.js
│   └── main.js
├── main
│   ├── data.js
│   ├── engine
│   │   ├── index.js
│   │   └── routes.js
│   ├── index.js
│   └── pages
│       ├── home.js
│       └── index.js
├── dev_panel
│   ├── data.js
│   ├── engine
│   │   ├── index.js
│   │   └── routes.js
│   ├── index.js
│   └── pages
│       ├── home.js
│       └── index.js
└── admin_panel.js
    ├── data.js
    ├── engine
    │   ├── index.js
    │   └── routes.js
    ├── index.js
    └── pages
        ├── home.js
        └── index.js

Answer 1

您可以使用..在目录结构中升级一级：

import Engine from '../engine'
import Routes from '../engine/routes.js'

Answer 2

您可以在顶部目录中创建一个文件common-exports.js，该文件会重新导出您在许多文件中导入的内容。这样您就可以从该文件导入所有内容。

common-exports.js：

export { default as Engine } from 'main/engine';
export { default as Routes } from 'main/engine/routes';

main/pages/home.js：

import { Engine, Routes } from 'common-exports';