通过 Mix 将 node_modules 导入 Laravel

Question

我正在尝试在 Laravel 5.7 项目中使用 OpenLayers (v5.3.0)，但是从 node_modules.

导入 ol 时遇到很多问题

我安装的ol如下（基于https://www.npmjs.com/package/ol）：

npm install ol

然后我更新了我的 resources\js\app.js，它现在只包含以下内容：

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

编辑： 我还在 resources\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: Unexpected identifier" 指的是 map.blade.php 中的以下行：

import Map from 'ol/Map';

编辑： 我还运行以下内容以确保安装了所有依赖项：

npm install --save-dev parcel-bundler

我在运行上面没有得到任何错误，但是在 Chrome 中仍然存在同样的错误。

编辑： 我也试过将 javascript 从我的 map.blade.php 移到一个新文件 (mapscript.js) 中，并且然后将其导入 map.blade.php（在 'map' div 之后），如下所示：

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

但是在这两种情况下仍然存在相同的未捕获类型错误。

我已经在 Stack Overflow 和其他地方尝试过很多类似问题的解决方案，我也尝试过在 npm 之外使用 ol，但我还没有找到任何可以解决我问题的方法。我相信使用 npm 和 Mix 是将 OpenLayers 构建到我的项目中的最佳方式，但我无法弄清楚为什么它不起作用。非常感谢您的帮助。

Answer 1

经过一些尝试和错误后，我使用 Mix、Webpack 和 ES6 模块导入让 OpenLayers 6.1 与 Laravel 6.2 一起工作。诀窍是将所有 javascript 写在一个单独的文件中，然后将其捆绑到 app.js 中。

使用 npm 将 openlayers 安装到您的 Laravel 项目中：

npm install ol

在 resources/js/myMap.js 的 Laravel 项目中创建一个新文件（与 bootstrap.js 和 app.js 一起）并将 OpenLayers javascript 代码放入其中。

让我们使用从 https://openlayers.org/en/latest/doc/tutorials/bundle.html

的官方文档复制的简短代码示例

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
    target: 'osm_map',
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

我们需要将其导出为文字 object 以使其可用于其他代码，因此插入额外的五行，如下所示。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var my_map = {                       // <-- add this line to declare the object
    display: function () {           // <-- add this line to declare a method 

        const map = new Map({
            target: 'osm_map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 0
            })
        });

    }                                // <-- close the method
};                                   // <-- close the object
export default my_map;               // <-- and export the object

将这两行添加到bootstrap.js的末尾，以便它包含我们的代码，并将我们的object my_map附加到全局window object 所以我们可以从页面引用它。

import my_map from './myMap.js';
window.my_map = my_map;

现在通过执行 npm run dev 将其全部捆绑起来。请注意，我们正在使用 Laravel 的默认 webpack 和混合配置 - 我们根本不需要编辑 webpack.mix.js。 npm run dev 将我们 myMap.js 文件中的代码复制到 app.js 中。每次编辑 myMap.js 时，我们都需要运行。（npm run watch 可用于自动执行此步骤）。

要在 blade 模板中显示地图，我们需要有一个 div 与 OpenLayers 地图目标匹配的 ID，在我们上面的示例代码中为 osm_map。这是最小的 blade.

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>
        #osm_map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="osm_map"></div>
</div>

<script src="{{ asset('js/app.js') }}" ></script>

<script type="text/javascript">
    window.my_map.display();
</script>

</body>
</html>

注：

div id="osm_map" 匹配 openlayers 目标。
OpenLayers CSS 也被捆绑并在此处引用。这会设置 OpenLayers 控件的样式。
当我们调用 my_map.display() 方法时显示地图。

这成功地在 Laravel blade 模板中显示了交互式 OpenLayers 地图。

Answer 2

安装 ol 包：

npm install ol

在 js 文件夹的资源目录中（存在 bootstrap.js 和 app.js）创建一个文件名 map.js

resources/js/map.js

在map.js（示例代码）中编写您的 Openlayer 代码：

import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
target: 'map',
layers: [
    new TileLayer({
        source: new OSM()
    })
],
view: new View({
    center: [0, 0],
    zoom: 0
             })
});

现在，转到webpack.mix.js，通常在最后。

在文件末尾添加.js('resources/js/map.js', 'public/js')

webpack.mix.js 将如下所示：

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/map.js', 'public/js');

现在，npm run dev 在终端

您的 *.blade.php 代码应如以下示例代码所示：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Using Webpack with OpenLayers</title>
    <style>
        #map {
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            overflow: hidden;
            position: fixed;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="{{ asset('/js/map.js') }}"></script>
</body>
</html>

不允许直接从 public 文件夹导入节点模块。在这里，我们在项目中导入模块，并在 public 文件夹中的 webpack 的帮助下使用它。

用于生产：npm run production 在终端

通过 Mix 将 node_modules 导入 Laravel

Importing node_modules into Laravel via Mix

javascript

laravel-5

npm

openlayers

openlayers-5