[英]Make webpack paths relative to current directory
I am using Rails 5.0 with Webpacker, and I am trying to setup our initial Webpack config. 我正在将Rails 5.0与Webpacker一起使用,并且正在尝试设置我们的初始Webpack配置。 In Rails+Webpacker Webpack generates a different build file for each item in the app/javascript/packs
folder. 在Rails + Webpacker中,Webpack为app/javascript/packs
文件夹中的每个项目生成一个不同的构建文件。 Is there a way to get these Webpack "packs" to resolve different paths for modules based on a files containing folder? 有没有一种方法可以使这些Webpack“包”根据包含文件夹的文件来解析模块的不同路径?
Redundant sections of paths in my import statements resulting in imports like: 我的import语句中路径的多余部分导致了类似以下的导入:
main/pages/home.js: 主/页/ home.js:
import Engine from 'main/engine'
import Routes from 'main/engine/routes.js'
dev_panel/pages/home.js: dev_panel /页/ home.js:
import Engine from 'dev_panel/engine'
import Routes from 'dev_panel/engine/routes.js'
etc... 等等...
And this is compounded for every file and subdirectory of course. 当然,每个文件和子目录的内容也是如此。 This is not only monotonous, but also makes re-organization of files and code a headache. 这不仅单调,而且使文件和代码的重新组织变得令人头疼。
main/pages/home.js: 主/页/ home.js:
// but still refers to /main/engine/routes.js
import Engine from 'engine'
import Routes from 'engine/routes.js'
dev_panel/pages/home.js: dev_panel /页/ home.js:
// but still refers to /dev_panel/engine/routes.js
import Engine from 'engine'
import Routes from 'engine/routes.js'
etc... 等等...
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
You can use ..
to go one level up in the directory structure: 您可以使用..
在目录结构中上移:
import Engine from '../engine'
import Routes from '../engine/routes.js'
You can create a file common-exports.js
at the top directory which reexports things that you import in many files. 您可以在顶层目录中创建文件common-exports.js
,该文件会重新导出您在多个文件中导入的内容。 That way you can import everything from that file. 这样,您可以从该文件导入所有内容。
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
: main/pages/home.js
:
import { Engine, Routes } from 'common-exports';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.