使Webpack路徑相對於當前目錄

Question

問題：

我正在將Rails 5.0與Webpacker一起使用，並且正在嘗試設置我們的初始Webpack配置。 在Rails + Webpacker中，Webpack為app/javascript/packs文件夾中的每個項目生成一個不同的構建文件。 有沒有一種方法可以使這些Webpack“包”根據包含文件夾的文件來解析模塊的不同路徑？

問題：

我的import語句中路徑的多余部分導致了類似以下的導入：

主/頁/ 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';