将第三方脚本导入 React答案

【问题标题】：Importing third party scripts into React将第三方脚本导入 React
【发布时间】：2017-08-08 23:28:54
【问题描述】：

我正在尝试在 React 生态系统中使用第三方脚本（地图框）。在传统的 javascript 中，我导入脚本，然后像这样初始化它：

<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>

L.mapbox.accessToken = 'pk.xxxtoken';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);

我尝试离开我的 React 应用程序的头部，然后在 componentDidMount() 中尝试初始化它，但它不知道“L”是什么：

'L' is not defined

所以我需要以某种方式将脚本导入到组件中，所以我查看了“react-async-script”，但我不确定......

【问题讨论】：

你使用gulp或webpack还是？
是的webpack，我可以用它来导入脚本吗？但这只会将脚本应用于窗口，我可以将它分配给特定的变量吗？
是的，你可以通过 webpack 加载一个脚本，下面 Aron 说你可以通过 import 将它分配给一个 var
See this link
@CerIs 我的回答有帮助吗？

标签： javascript reactjs

【解决方案1】：

看起来 mapbox 有一个 npm 包，所以你可以用 npm install --save mapbox 安装它，然后通过导入它在你的 react 组件中使用它

import * as L from 'mapbox';

// do stuff with L here

【讨论】：