在react中使用第三方库

本文只讨论不能通过npm安装，import 导入，例如 jQuery、百度地图Api、微信jssdk 等第三方js 下面以引入百度地图Api为例展开说明：

1. 首先需要在入口文件（app/public/index.html）使用

<!-- 百度地图api --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=我的的秘钥"></script>

例如我的 src/index.js 是长介个样子的：

import React from 'react' class Index extends React.Component{ componentDidMount () { const myMap = new BMap.Map("csm-map") } render () { return (<div id='csm-map'></div>) } } export default Index

在 src/index.js 实例化 BMap 时候却报错了，提示BMap is not defined

经过了多方调研（实际是百度！！！）发现：

以模块化的方式构建应用时，在JS模块中是不能够直接访问入口文件中的变量的。

那么我们又该如何在某个JS文件中导入入口HTML文件中的变量呢？

或者说我们如何能够在src/index.js中取得HTML中引入的脚本中的BMap对象呢？

2. 解决方案

又经过了漫长的多方查找资料。。。 找到了两个可行的解决方案

方法一：通过webpack的externals加载BMap使它可以通过import引入

在 webpack配置文件（app/config/webpack.config.js） 中添加 externals

externals: { BMap : 'BMap', }

在 src/index.js 导入 BMap

import BMap from 'BMap' // 实例化 const myMap = new BMap.Map("csm-map") 写入externals中的依赖是不会被打包进最后的bundle里面的虽然它不会被打包，但在程序运行的时候你仍然能通过模块化的方式去引入这些依赖，如commonJS,AMD,ES6的import等

方法二：全局变量

如果是全局变量，可以直接使用 window.BMap 方法

如果不是全局变量， 可以在入口文件 用Window对象保存BMap变量，实现HTML文件和JS文件间的变量传递

在 src/index.js 中调用

const { BMap } = window; // 实例化 const myMap = new BMap.Map("csm-map")

温馨提示：id = “csm-map”，必须设置height，不然地图没有高度，而且必须渲染，不然会报错。

如果不是全局变量，那么需要在入口文件（app/public/index.html）中加上 window.BMap = BMap