如何在 Rails Webpacker 中添加多个source_path

Question

我们使用Webpacker将JavaScripts和CSS文件加载到网页中。

目前，在webpacker.yml中，我们已将source_path设置为app/javascript.从此目录加载 JavaScript 文件可以正常工作。

但是在我们的应用程序中，我们有一个engines目录，所有JavaScript文件都位于engines目录中的不同engines内，为了加载这些 JavaScript 文件，我们为引擎目录中的每个包创建了一个app/javascript/packslink。

有没有更好的方法来做到这一点，不提供链接或在webpacker.yml文件中提供多个source_path。

---

供参考：

这是我们目前拥有的文件夹结构：

-root
|
|-app
|-javascript
|-packs
|-[link to engine1.js pack files]
|-[link to engine2.js pack files]
|-engines
|- engine1
|-app
|-javascript
|-packs
|-engine1.js
|- engine2
|-app
|-javascript
|-packs
|-engine1.js

这就是webpacker.yml配置的方式

default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']

Answer 1

我想你会想做这样的事情：

additional_paths: ['engines']

来源：https://github.com/rails/webpacker#resolved

如果要将 Webpacker 添加到具有应用程序/资产或引擎内部大部分资产的现有应用程序中，并且您希望与 webpack 模块共享，则可以使用 config/webpacker.yml 中提供的additional_paths选项。这允许您添加 webpack 在解析模块时应查找的其他路径：

Answer 2

也许做你提到的更好的方法是利用webpacker文件夹结构。

与其创建指向"app/javascript/packs"文件夹中文件的链接，也许您可以通过这些文件夹中的"index.js"文件引用它们。

---

根据文档，webpacker将在每个导入的文件夹中查找"index.js"文件。

因此，您可以将文件结构修改为如下所示的内容：

-root
|
|-app
|-javascript
|-packs
|-engine1.js
|-engine2.js
|-engines
|- engine1
|-index.js
|-app
|-javascript
|-packs
|-engine1.js
|- engine2
|-index.js
|-app
|-javascript
|-packs
|-engine1.js

创建文件并导入相应的文件夹

// app/javascript/packs/engine1.js
import 'engines/engine1'
// app/javascript/packs/engine2.js
import 'engines/engine2'

这将从上述文件夹中导入"index.js"文件，并且在该文件中，您可以从"engineX"文件夹中导入所需的所有其他内容。

然后你可以按如下方式引用它们

<%# app/views/layouts/application.html.erb %>
<%= javascript_pack_tag 'engine1' %>
<%= javascript_pack_tag 'engine2' %>

所有这些都可以完成，而无需修改默认的Webpacker配置