本文只讨论不能通过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