如何在Rails Webpacker中添加多个source_path

Question

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

目前，在webpacker.yml中，我们将source_path设置为app/javascript。这对于从此目录加载JavaScript文件有效。

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

有没有更好的方法来做到这一点，而不提供链接或在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']

- Dipak

---

我认为你可以将 app/engines 添加到 resolved_paths 中。 - Scott Schupbach

@ScottSchupbach 实际文件在 app/engines/[engine_name]/app/javascript 中，其中会有不同的引擎名称。 - Dipak

Answer 1

我认为你想要做的事情是这样的：

我认为您希望做类似于这样的事情：

additional_paths: ['engines']

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

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

- user3738936

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配置。

- Gabriel Cabrera