Rails、Webpacker 和 Elm：如何正确导入文件？

Question

我在使用Webpacker 的默认约定正确导入我在Rails 5.1.4 应用程序中编写的Elm 模块时遇到问题。

这是我的app/javascript 目录的当前目录结构：

tree
.
├── heritage_survey
│   ├── Language.elm
│   ├── Languages.elm
│   ├── Main.elm
│   └── index.js
├── packs
│   └── heritage_survey.js
└── util
    ├── Maybe.elm
    └── String.elm

packs/heritage_survey.js 内容：

import 'heritage_survey'

heritage_survey/index.js 内容：

import Elm from './Main'
import './Language'
import './Languages'
import 'util/String'
import 'util/Maybe'

document.addEventListener('turbolinks:load', () => {
  const target = document.getElementById('heritage-survey')

  Elm.Main.embed(target);
});

最后，这是来自heritage_survey/Main.elm 的import 语句：

import Html exposing (Html, h1, text, form, div, input, label, select, option, button)
import Html.Attributes exposing (class, for, value, type_, disabled, selected, multiple, checked)
import Html.Events exposing (on, onCheck, onInput)
import Json.Decode
import Language exposing (Languages, Language)
import Util.Maybe as May

不幸的是，我收到以下 webpack 编译错误：

14:39:59 webpack.1 | webpack: Compiling...
14:39:59 webpack.1 |  10% building modules 0/1 modules 1 active ...p/javascript/heritage_survey/Main.elmRunning /Users/mueller.128/repos/asctech/multicat/node_modules/.bin/elm-make /Users/mueller.128/repos/asctech/multicat/app/javascript/heritage_survey/Main.elm --yes --warn --debug --output /var/folders/lw/nfv4jfkj1tg1q0r9tt7n6yrcgknvck/T/117108-49541-128p571.4v28.js
Hash: 29154e6aed5cde6dc2e8
14:39:59 webpack.1 | Version: webpack 3.8.1
14:39:59 webpack.1 | Time: 417ms
14:39:59 webpack.1 |                                   Asset      Size  Chunks                    Chunk Names
14:39:59 webpack.1 | heritage_survey-4b40cb19cfb9f25f7791.js   2.19 MB       0  [emitted]  [big]  heritage_survey
14:39:59 webpack.1 |                           manifest.json  76 bytes          [emitted]
14:39:59 webpack.1 |    [2] multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js 40 bytes {0}
14:39:59 webpack.1 |    [3] (webpack)-dev-server/client?http://0.0.0.0:3035 7.95 kB {0}
14:39:59 webpack.1 |    [4] ./node_modules/url/url.js 23.3 kB {0}
14:39:59 webpack.1 |    [5] ./node_modules/punycode/punycode.js 14.7 kB {0}
14:39:59 webpack.1 |   [11] ./node_modules/strip-ansi/index.js 161 bytes {0}
14:39:59 webpack.1 |   [12] ./node_modules/ansi-regex/index.js 135 bytes {0}
14:39:59 webpack.1 |   [13] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0}
14:39:59 webpack.1 |   [14] (webpack)-dev-server/client/socket.js 1.05 kB {0}
14:39:59 webpack.1 |   [16] (webpack)-dev-server/client/overlay.js 3.73 kB {0}
14:39:59 webpack.1 |   [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
14:39:59 webpack.1 |   [23] (webpack)/hot/emitter.js 75 bytes {0}
14:39:59 webpack.1 |   [25] ./app/javascript/packs/heritage_survey.js 25 bytes {0}
14:39:59 webpack.1 |   [26] ./app/javascript/heritage_survey/index.js 261 bytes {0}
14:39:59 webpack.1 |   [30] ./app/javascript/util/String.elm 81 kB {0}
14:39:59 webpack.1 |   [31] ./app/javascript/util/Maybe.elm 80.8 kB {0}
14:39:59 webpack.1 |     + 17 hidden modules
14:39:59 webpack.1 |
14:39:59 webpack.1 | ERROR in ./app/javascript/heritage_survey/Main.elm
14:39:59 webpack.1 | Module build failed: Error: Compiler process exited with error Compilation failed
14:39:59 webpack.1 | I cannot find module 'Language'.
14:39:59 webpack.1 |
14:39:59 webpack.1 | Module 'Main' is trying to import it.
14:39:59 webpack.1 |
14:39:59 webpack.1 | Potential problems could be:
14:39:59 webpack.1 |   * Misspelled the module name
14:39:59 webpack.1 |   * Need to add a source directory or new dependency to elm-package.json
14:39:59 webpack.1 |
14:39:59 webpack.1 |     at ChildProcess.<anonymous> (/Users/mueller.128/repos/asctech/multicat/node_modules/node-elm-compiler/index.js:141:27)
14:39:59 webpack.1 |     at emitTwo (events.js:126:13)
14:39:59 webpack.1 |     at ChildProcess.emit (events.js:214:7)
14:39:59 webpack.1 |     at maybeClose (internal/child_process.js:925:16)
14:39:59 webpack.1 |     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14:39:59 webpack.1 |  @ ./app/javascript/heritage_survey/index.js 1:0-25
14:39:59 webpack.1 |  @ ./app/javascript/packs/heritage_survey.js
14:39:59 webpack.1 |  @ multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js
14:39:59 webpack.1 | webpack: Failed to compile.

Answer 1

事实证明，我还需要在我的应用程序根目录中更新elm-package.json 中的source-directories。我试图只包含./app/javascript，但这似乎不起作用。我还必须包含./app/javascript/heritage_survey。

更新：

好的，我现在掌握了窍门。这是我的最终目录结构、它们的内容和elm-package.json 配置。

app/javascript目录结构：

tree
.
├── HeritageSurvey
│   ├── Language.elm
│   ├── Languages.elm
│   ├── Main.elm
│   └── index.js
├── packs
│   └── heritage_survey.js
└── util
    ├── Maybe.elm
    └── String.elm

app/javascript/packs/heritage_survey.js内容：

import 'HeritageSurvey'

app/javascripts/HeritageSurvey/index.js 内容：

import Elm from './Main'
import './Language'
import './Languages'
import 'util/String'
import 'util/Maybe'

document.addEventListener('turbolinks:load', () => {
  const target = document.getElementById('heritage-survey')

  Elm.Main.embed(target);
});

app/javascript/HeritageSurvey/Main.elm 导入语句：

import Html exposing (Html, h1, text, form, div, input, label, select, option, button)
import Html.Attributes exposing (class, for, value, type_, disabled, selected, multiple, checked)
import Html.Events exposing (on, onCheck, onInput)
import Json.Decode
import HeritageSurvey.Language as Language exposing (Languages, Language)

source-directories 在我的elm-package.json 配置文件中：

"source-directories": [
    "./app/javascript",
    "./app/javascript/packs"
],