基於easywebpack整合egg、react及mapbox實踐

hubcarl.github.io

知識點

1、利用easywebpack創建基於egg、react的企業級開發工程（步驟略）；

2、整合mapbox開源地圖引擎；

步驟：

一、利用easywebpack創建一個後台服務骨架工程，「 Egg + React + Server Side Sender project boilerplate」，創建完成後運行界面如下圖所示，步驟略；

二、安裝mapbox-gl、react-mapbox-gl模塊

$ npm install --save-dev mapbox-gl react-mapbox-gl

三、這裡注意，並不是每個頁面都可以添加地圖組件（這裡以添加到原有的about頁面為例），如果將地圖組件添加到如下圖示2的位置，則編譯報錯。

將組件添加到頁面中的位置

以上為編譯報錯信息，輸出nodejs.ReferenceError: self is not defined

如果添加到如1頁面位置，則編譯通過。頁面代碼如下：

../web/component/spa/redux/components/about.js

import React, {Component} from react;import ReactMapboxGl, {Layer, Feature} from react-mapbox-gl;const Map = ReactMapboxGl({ accessToken: pk.eyJ1IjoibmVpbDAwOCIsImEiOiJjamYyODRiNGExZHZyMzNvMGZvOHZyaGtxIn0.w6tn1QyS7bQkliPyC1u7EQ});export default class About extends Component { componentDidMount() { console.log(----Header componentDidMount-----); } render() { return <div> <Map style=mapbox://styles/mapbox/streets-v9 containerStyle={{ height: 100vh, width: 100vw }}> <Layer type=symbol id=marker layout={{icon-image: marker-15}}> <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/> </Layer> </Map> </div>; }}

上面的寫法編譯通過，運行界面如下：

總結

根據多次實踐判斷，組件只能載入到前端渲染的頁面中，不能添加到後端渲染頁面。至於什麼原因或者處理方法，還未找到。

end