Openlayer6.x Example在本地报错
报错如标题所示:
@parcel/transformer-js: Browser scripts cannot have imports or exports
官方答案见这里
解决问题
其实parcel2.x版本对浏览器本身做了兼容,现在大部分浏览器都已经原生支持es6语法,只需在<script>标签中加入type="module"
即可,以官方simple map为例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Map</title>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="module" src="main.js"></script>
</body>
</html>
关键在
<script type="module" src="main.js"></script>