Почему Elm Build не работает?Дает неверный путь - PullRequest
Новая
       6

Почему Elm Build не работает?Дает неверный путь

0 голосов
/ 29 ноября 2018

Вяз 0.19 create-elm-app myapp и elm-app start показывает логотип, а "Your Elm App is working!" Хорошо.

README рекомендует затем elm-app build.Делая это, я получаю папку сборки с index.html.Открытие ничего не показывает.Ошибки консоли Crome.

src="/static/js/vendors~main.3ca81432.chunk.js" path wrong?
src="static/js/vendors~main.3ca81432.chunk.js" shows the text but not pic (wrong path..)

Я делаю что-то не так или это ошибка со стороны Вяза?

Альтернатива: elm make Main.elm —output=main.html нехорошо помещать все материалы js в html.

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

create-elm-app действительно может помочь вам быстро запустить что-то приличное - мне это нравится.

В нескольких местах есть ссылки на пути, и при первом создании вам нужно будет адаптировать вещи к тому, чего вы пытаетесь достичь.

TL; DR: вам необходимо настроить локальный путь и ссылки в Main.elm

Создать новый файл с именем elmapp.config.js.

Вставить в него следующее: 

/*
More config information here:
https://github.com/halfzebra/create-elm-app/blob/master/template/README.md#overriding-webpack-config
*/

module.exports = {
    homepage: "./" //required to normalise path
}

Откройте ваш src/Main.elm, найдите блок ---- VIEW ---- и настройте его следующим образом: 

view : Model -> Html Msg
view model =
    div []
        [ img [ src "logo.svg" ] []
        , h1 [] [ text "Your Elm App is working!" ]
        , img [ src "./static/images/logo.svg" ] []
        ]

Удаление / с пути - хорошая идея, так какmain.js создает экземпляр этого ресурса неправильно.Это можно изменить на ./, который интерпретируется как абсолютный путь (относительно среды).Оба синтаксиса будут работать одинаково.

Если вы клонируете logo.svg в новую папку с именем: static внутри папки images, вы можете ссылаться на исходный [ img [ src "logo.svg" ] [] из корневого каталога и , img [ src "./static/images/logo.svg" ] [] с относительным путем куда угодно.

Теперь elm-app build будет указывать на ./logo.svg и ./static/images/logo.svg, как и ожидалось от main.js.

Если перейти к более подробным сведениям, вам может помочь следующееначинаем поиск любых несоответствий:

В README.md есть некоторые ключевые мысли по поводу переменной пути: 

For the project to build, these files must exist with exact filenames:

* `public/index.html` is the page template;
* `public/favicon.ico` is the icon you see in the browser tab;
* `src/index.js` is the JavaScript entry point.

Вы также можете указать, где вы хотите elm-app build развернутьпуть: 

## Changing the base path of the assets in the HTML

By default, assets will be linked from the HTML to the root url. For example `/css/style.css`.

If you deploy to a path that is not the root, you can change the `PUBLIC_URL` environment variable to properly reference your assets in the compiled assets. For example: `PUBLIC_URL=./ elm-app build`.

Где внести быстрые изменения:

index.html содержит %PUBLIC_URL%/, вероятно, в <link rel="manifest" href="manifest.json"> и мета-значке

In src/index.js вы заметите: ./ это означает корневой и текущий объект: 

import './main.css';
import { Elm } from './Main.elm';
import registerServiceWorker from './registerServiceWorker';

Elm.Main.init({
  node: document.getElementById('root')
});

registerServiceWorker();

В elm.json вы увидите "source-directories" - это может быть полезно, если вы планируете добавлять пакеты без загрязненияваш рабочий каталог: 

   {
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.0",
            "elm/core": "1.0.0",
            "elm/html": "1.0.0",
            "elm/svg": "1.0.1",
            "elm/url": "1.0.0",
            "justgage/tachyons-elm": "4.1.1"
        },
        "indirect": {
            "elm/json": "1.0.0",
            "elm/time": "1.0.0",
            "elm/virtual-dom": "1.0.0"
        }
    },
    "test-dependencies": {
        "direct": {
            "elm-explorations/test": "1.0.0"
        },
        "indirect": {
            "elm/random": "1.0.0"
        }
    }
}

В public/manifest.json вы также увидите "start_url": "./index.html" и "src": "favicon.ico": 

  `{
  "short_name": "Elm App",
  "name": "Create Elm App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
0 голосов
/ 29 ноября 2018

Я бы избегал таких инструментов, как create-elm-app.По моему опыту, они просто усложняют настройку и ошибки, подобные этим.

elm make выведет файл js, если вы укажете вывод в виде файла js вместо файла html: 

elm make Main.elm —output=main.js

Затем вы можете создать свой собственный html-файл, в котором вы запускаете Elm, запустив Elm.Main.init: 

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
    <script>
      Elm.Main.init({node: document.getElementById("app")});
    </script>
  </body>
...