為何chrome用唔到import?

本帖最後由 3ldk 於 2019-10-16 09:44 編輯

我參考依度, 但唔係用npm install, 直接unzip js放係html隔離
https://openlayers.org/en/latest/doc/tutorials/bundle.html
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.         <style>
  5.                 #map {
  6.                         width: 1600px;
  7.                         height: 1200px;
  8.                 }
  9.         </style>
  10. </head>
  11. <body>
  12. <div id="map"></div>
  13. <script src="app.js"></script>
  14. </body>
  15. </html>
複製代碼
  1. import './ol/ol.css';
  2. import {Map, View} from './ol';
  3. import TileLayer from './ol/layer/Tile';
  4. import OSM from './ol/source/OSM';
  5. // import 'ol/ol.js'

  6. const map = new ol.Map({
  7.   target: 'map',
  8.   layers: [
  9.     new ol.layer.Tile({
  10.       source: new ol.source.OSM()
  11.     })
  12.   ],
  13.   view: new ol.View({
  14.     center: [0, 0],
  15.     zoom: 0
  16.   })
  17. });
複製代碼
但依個import用唔到, Uncaught SyntaxError: Cannot use import statement outside a module


google上d人話要build先得, 但我check過chrome一早support import

https://www.zhangxinxu.com/wordp ... port-import-module/

我當唔support import css, 但就算remove第一句, 都係相同error

我又參考左其他教學, 改成咁樣import, 但一樣唔得
  1. // import './ol/ol.css';
  2. // import {Map, View} from './ol';
  3. // import TileLayer from './ol/layer/Tile';
  4. // import OSM from './ol/source/OSM';
  5. import 'ol/ol.js'

  6. const map = new ol.Map({
  7.   target: 'map',
  8.   layers: [
  9.     new ol.layer.Tile({
  10.       source: new ol.source.OSM()
  11.     })
  12.   ],
  13.   view: new ol.View({
  14.     center: [0, 0],
  15.     zoom: 0
  16.   })
  17. });
複製代碼
正確import方法應該係點樣?

<script type="module" src="app.js"></script>

TOP