作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法使用 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.
最佳答案
事实证明,我还需要更新应用程序根目录中 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)
我的
elm-package.json
配置文件中的
source-directories
:
"source-directories": [
"./app/javascript",
"./app/javascript/packs"
],
关于javascript - Rails、Webpacker 和 Elm : How dow I correctly import files?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47188471/
我是一名优秀的程序员,十分优秀!