最近開始感興趣openlayer框架顯示地圖牧牢，測試使用vscode+nodejs
參考o(jì)penlayer官網(wǎng)的例子，在這了記錄遇到的坑
（https://openlayers.org/en/v5.3.0/doc/tutorials/bundle.html）
使用和編寫模塊時姿锭，現(xiàn)代JavaScript效果最佳塔鳍。建議使用OpenLayers的方法是安裝ol軟件包。本教程將引導(dǎo)您建立一個簡單的開發(fā)環(huán)境呻此，該環(huán)境需要節(jié)點（nodejs）才能正常工作轮纫。
在本教程中，我們將使用Parcel捆綁我們的應(yīng)用程序焚鲜。還有其他幾個選項掌唾，其中一些是從README鏈接的。
（需要安裝Parcel?
npm install --save-dev parcel-bundler ）
初步步驟
為您的項目創(chuàng)建一個新的空目錄忿磅，然后通過運(yùn)行導(dǎo)航到該目錄mkdir new-project && cd new-project糯彬。使用初始化您的項目，npm init并回答所提出的問題葱她。
使用以下方式將OpenLayers添加為對您的應(yīng)用程序的依賴
npm install ol
此時撩扒，您可以要求NPM通過運(yùn)行來添加所需的開發(fā)依賴項
npm install --save-dev parcel-bundler
應(yīng)用程序代碼和index.html
將您的應(yīng)用程序代碼放在中index.js。這是一個簡單的起點：
import'ol/ol.css';import {Map, View} from'ol';import TileLayer from'ol/layer/Tile';import OSM from'ol/source/OSM';constmap =newMap({target:'map',layers: [newTileLayer({source:newOSM()})],view:newView({center: [0,0],zoom:0})});
您還需要一個index.html將使用捆綁軟件的文件吨些。這是一個簡單的示例：
創(chuàng)建捆綁
使用簡單的腳本搓谆，您可以引入命令npm run build并npm start手動構(gòu)建捆綁包并觀察更改炒辉。將以下內(nèi)容添加到的腳本部分中package.json：
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "parcel index.html","build": "parcel build --public-url . index.html"}
而已。現(xiàn)在運(yùn)行您的應(yīng)用程序泉手，輸入
npm start
在您的控制臺中黔寇。要測試您的應(yīng)用程序，請在瀏覽器中打開http：// localhost：1234 /斩萌。每當(dāng)您更改某些內(nèi)容時缝裤，頁面都會自動重新加載以顯示更改結(jié)果。
請注意术裸，已經(jīng)創(chuàng)建了一個包含所有應(yīng)用程序代碼和應(yīng)用程??序中使用的所有依賴項的JavaScript文件倘是。在OpenLayers軟件包中，它僅包含必需的組件袭艺。
要創(chuàng)建應(yīng)用程序的生產(chǎn)包搀崭，只需鍵入
npm run build
并將dist/文件夾復(fù)制到生產(chǎn)服務(wù)器。
