Импорт node_modules в Laravel через Mix - PullRequest
Новая
       12

Импорт node_modules в Laravel через Mix

0 голосов
/ 04 декабря 2018

Я пытаюсь использовать OpenLayers (v5.3.0) в проекте Laravel 5.7, но у меня много проблем с импортом ol из node_modules.

Я установил ol следующим образом (на основе https://www.npmjs.com/package/ol):

npm install ol

Затем я обновил свои ресурсы \ js \ app.js, которые теперь содержат только следующее: 

require('./bootstrap');
require('ol');

РЕДАКТИРОВАТЬ: Я также пробовалследующее в ресурсах \ js \ app.js, без успеха: 

require('./bootstrap');
const ol = require('ol');

Мой webpack.mix.js содержит следующее: 

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js/app.js', )
   .sass('resources/sass/app.scss', 'public/css');

У меня также есть следующие соответствующие строки вфайл с именем map.blade.php, где я хочу отобразить карту OpenLayers: 

<script src="{!! mix('js/app.js') !!}"></script>
...
<div id='map' style='z-index: 1; width: 100%; height:calc(100% - 56px);'>
    <script>
        import Map from 'ol/Map';
        import View from 'ol/View';
        import TileLayer from 'ol/layer/Tile';
        import XYZ from 'ol/source/XYZ';

        new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                    })
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 2
            })
        });
    </script>
</div>

Я также запускаю npm run dev.

При тестировании в Chrome я получаю«Uncaught SyntaxError: неожиданный идентификатор», ссылающийся на следующую строку в map.blade.php: 

import Map from 'ol/Map';

EDIT: Я также выполнил следующее, чтобы убедиться, что все зависимости установлены: 

npm install --save-dev parcel-bundler

Я не получил никаких ошибок при запуске выше, но та же ошибка в Chrome все еще там.

РЕДАКТИРОВАТЬ: Я также попытался переместить javascript из моего map.blade.php в новый файл (mapscript.js), а затем импортировать его в map.blade.php (после div 'map') выглядит следующим образом: 

<script src="{!! asset('js/mapscript.js') !!}" type="module"></script>

Но вместо этого я получаю следующую ошибку: 

Uncaught TypeError: Failed to resolve module specifier "ol/Map". Relative references must start with either "/", "./", or "../".

После этого я попытался переместить следующую строку изapp.js и в mapscript.js: 

require('ol');

А также пытались сделать то же самое с: 

const ol = require('ol');

Но в обоих случаях сохраняется та же ошибка Uncaught TypeError.

Я пробовал решения многих подобных вопросов в Stack Overflow и в других местах, а также пробовал использовать ol вне npm, но я не нашел ничего, что решило бы эту проблему для меня.Я считаю, что использование npm и Mix - лучший способ встроить OpenLayers в мой проект, но я не могу понять, почему он не работает.Был бы очень признателен за помощь.

...