Javascript Rails、Webpacker和Elm：如何正确导入文件？_Javascript_Ruby On Rails_Webpack_Elm

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

javascript ruby-on-rails webpack elm

Javascript Rails、Webpacker和Elm：如何正确导入文件？,javascript,ruby-on-rails,webpack,elm,Javascript,Ruby On Rails,Webpack,Elm,使用Webpacker中的默认约定，我在Rails5.1.4应用程序中编写的Elm模块在正确导入时遇到问题以下是我的app/javascript目录的当前目录结构： tree . ├── heritage_survey │ ├── Language.elm │ ├── Languages.elm │ ├── Main.elm │ └── index.js ├── packs │ └── heritage_survey.js └── util ├── Maybe.el

使用

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'

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);
});

import 'HeritageSurvey'

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\u survey/index.js

内容：

import 'heritage_survey'

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);
});

import 'HeritageSurvey'

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\u 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

很遗憾，我遇到以下网页包编译错误：

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.

14:39:59网页1 |网页：编译。。。
14:39:59 webpack.1 | 10%构建模块0/1模块1活动…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--是--警告--调试--输出/var/folders/lw/nfv4jfkj1tg1q0r9tt7n6yrcgknvck/T/117108-49541-128p571.4v28.js
哈希：29154E6AED5CD6DC2E8
14:39:59网页1 |版本：网页3.8.1
14:39:59网页1 |时间：417ms
14:39:59网页包。1 |资产大小块块块名称
14:39:59网页。1 |遗产调查-4b40cb19cfb9f25f7791.js 2.19MB 0[排放量][大]遗产调查
14:39:59 webpack.1 | manifest.json 76字节[已发出]
14:39:59网页包。1 |[2]多（网页包）-开发服务器/客户端？http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js 40字节{0}
14:39:59网页包.1 |[3]（网页包）-开发服务器/客户端？http://0.0.0.0:3035 7.95 kB{0}
14:39:59 webpack.1 |[4]./node_modules/url/url.js 23.3kb{0}
14:39:59 webpack.1 |[5]./node_modules/punycode/punycode.js 14.7kb{0}
14:39:59 webpack.1 |[11]./node_模块/strip ansi/index.js 161字节{0}
14:39:59 webpack.1 |[12]./node_modules/ansi regex/index.js 135字节{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.05kb{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非递归^\.\/log$170字节{0}[编译]
14:39:59 webpack.1 |[23]（webpack）/hot/emitter.js 75字节{0}
14:39:59 webpack.1 |[25]./app/javascript/packs/heritage|u survey.js 25字节{0}
14:39:59 webpack.1|[26]。/app/javascript/heritage_survey/index.js 261字节{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.8kb{0}
14:39:59网页包.1 |+17个隐藏模块
14:39:59网页。1|
14:39:59 webpack.1 |./app/javascript/heritage_survey/Main.elm中出错
14:39:59 webpack.1 |模块生成失败：错误：编译器进程退出，错误为编译失败
14:39:59网页。1 |我找不到模块“语言”。
14:39:59网页。1|
14:39:59网页。1 |模块“Main”正在尝试导入它。
14:39:59网页。1|
14:39:59网页。1 |潜在问题可能是：
14:39:59网页。1 |*拼错了模块名称
14:39:59 webpack.1 |*需要向elm-package.json添加源目录或新的依赖项
14:39:59网页。1|
14:39:59网页。1 |在ChildProcess。（/Users/mueller.128/repos/asctech/multicat/node_modules/node elm compiler/index.js:141:27）
14:39:59网页1 |在emitTwo（events.js:126:13）
14:39:59网页包.1 |位于ChildProcess.emit（events.js:214:7）
14:39:59网页1 |在maybeClose（内部/子进程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|u survey.js
14:39:59 webpack.1 |@multi（webpack）-开发服务器/客户端？http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js
14:39:59网页包。1 |网页包：未能编译。

事实证明，我还需要更新应用程序根目录中

elm package.json

中的

源目录。我试图只包含/app/javascript
，但这似乎不起作用。我还必须包括/app/javascript/heritage\u调查

更新：
好了，我现在掌握了窍门。这是我的最终目录结构、目录内容和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 'heritage_survey'

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);
});

import 'HeritageSurvey'

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/javascripts/HeritageSurvey/index.js
内容：
import 'heritage_survey'

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);
});

import 'HeritageSurvey'

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语句：
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": [
    "./app/javascript",
    "./app/javascript/packs"
],

事实证明，我还需要更新应用程序根目录中elm package.json
中的源目录。我试图只包含/app/javascript
，但这似乎不起作用。我还必须包括/app/javascript/heritage\u调查

更新：
好了，我现在掌握了窍门。这是我的最终目录结构、目录内容和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 'heritage_survey'

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);
});

import 'HeritageSurvey'

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/javascripts/HeritageSurvey/index.js
内容：
import 'heritage_survey'

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);
});

import 'HeritageSurvey'

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语句：
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": [
    "./app/javascript",
    "./app/javascript/packs"
],

嗨，库尔-我面临着类似的问题，我正在寻找一个关于你是如何做事情的指针-或者什么是做事情的最佳方式：我应该在哪里为我的rails应用程序存储我的elm文件夹/文件：我应该将它们放在我的rails应用程序中，还是将它们完全分开？第二，你用过elm crea吗