如何将Elm 0.19.1集成到使用Webpacker的Rails 6应用中

1. Main.elm 文件存放位置 #

Rails 6默认通过Webpacker管理前端资源，建议将Elm源码统一放在app/javascript/elm目录下，对应的Main.elm完整路径为app/javascript/elm/Main.elm，该路径符合Rails 6前端资源存放约定，也方便Webpacker扫描识别。

2. Webpacker 配置步骤 #

• 第一步：安装Elm相关依赖，在项目根目录执行命令：yarn add elm elm-webpack-loader
• 第二步：初始化Elm项目配置，执行elm init按照提示完成操作后，会在根目录生成elm.json文件，修改文件中source-directories配置，指定Elm源码路径：

  "source-directories": [
      "app/javascript/elm"
  ]
  

• 第三步：配置Webpacker加载Elm文件，修改config/webpack/environment.js，添加Elm loader规则：

  const { environment } = require('@rails/webpacker')
  
  environment.loaders.append('elm', {
    test: /\.elm$/,
    exclude: [/elm-stuff/, /node_modules/],
    use: 'elm-webpack-loader'
  })
  
  module.exports = environment
  

• 第四步：在pack入口文件中引入Elm代码，编辑默认入口app/javascript/packs/application.js，添加引入和挂载逻辑：

  import { Elm } from '../elm/Main.elm'
  
  // 页面存在对应挂载节点时初始化Elm应用
  const elmRoot = document.getElementById('elm-root')
  if (elmRoot) {
    Elm.Main.init({
      node: elmRoot
    })
  }
  

• 第五步：在需要展示Elm应用的Rails视图中添加挂载节点即可：

  <div id="elm-root"></div>
  

小提示：自动生成的elm-stuff是Elm的依赖缓存目录，不需要提交到代码仓库，建议添加到.gitignore文件中。

内容的提问来源于stack exchange，提问作者johnrbnz