![](/img/trans.png)
[英]How do I make JavaScript file paths relative to the current file directory?
[英]Make webpack paths relative to current directory
我正在将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
您可以使用..
在目录结构中上移:
import Engine from '../engine'
import Routes from '../engine/routes.js'
您可以在顶层目录中创建文件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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.