通过混合技术将node_modules导入Laravel
我试图在Laravel5.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 :意外标识符“，它指的是map.blade.php中的以下一行：
import Map from 'ol/Map';编辑：--我还运行了以下命令，以确保安装了所有依赖项：
npm install --save-dev parcel-bundler运行上述程序时，我没有发现任何错误，但Chrome中的相同错误仍然存在。
编辑：--我还尝试将javascript从中移出到一个新文件(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');但在这两种情况下，同样的不透明的TypeError仍然存在。
我尝试过在堆栈溢出和其他地方给出许多类似问题的解决方案，我也尝试过在npm之外使用ol，但是我没有找到任何解决这个问题的方法。我相信使用npm和Mix是将OpenLayers构建到我的项目中的最佳方法，但我无法理解为什么它不起作用。会很感激你的帮助。
回答 2
Stack Overflow用户
发布于 2019-12-14 09:07:00
经过一些尝试和错误后，我使用OpenLayers 6.1使用混合、Webpack和ES6模块导入来处理Laravel6.2。诀窍是将所有javascript写入一个单独的文件中，并将其打包到app.js中。
使用npm将开始层安装到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
})
});我们需要将其导出为一个文字对象，以使其可用于其他代码，因此，请插入以下五行代码。
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的末尾，以便它合并我们的代码，并将对象my_map附加到全局窗口对象，以便我们可以从页面引用它。
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可用于自动化此步骤)。
要使地图显示在刀片模板中，我们需要有一个div id来匹配OpenLayers映射目标，在上面的示例代码中是osm_map。这是一把最小的刀片。
<!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 CSS也被捆绑在一起，并在这里引用。这将为OpenLayers控件设置样式。
- 当我们调用我们的my_map.display()方法时，就会显示地图。
这成功地在Laravel叶片模板中显示了一个交互式的OpenLayers地图。
Stack Overflow用户
发布于 2020-08-24 13:41:12
安装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
})
});现在，goto 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>不允许直接从公用文件夹导入节点模块。在这里，我们导入项目中的模块，并在公用文件夹中的webpack帮助下使用它。
生产:终端中的npm run production
https://stackoverflow.com/questions/53603047
复制相似问题
腾讯云开发者
