React踩坑-引用插件

鹿酒 2017/8/20 JavaScriptReact

最近在看react,想着把之前写的页面转换为react试试。

自己写的组件还好，当我把js插件放进去的时候出现了一个大问题！

虽然目前是解决了，但是还不知道为什么，以后补足。

# 起因

在转化原项目为React项目的过程中，由于我的页面中使用了swiper 3插件，页面一直报错。

在引用了本地JS后的报错信息

在点击问题之后，打开了

点击报错的js文件，跳转到HTML中

# 问题

经过查询，当服务器配置不正确时会出现这种情况。我猜测原因可能是creat-reac-app脚手架的默认配置（path）的限制。

# 尝试

在这之后，我尝试了几种方法

<!-- PlanA -->
<!-- html文件 -->
<script src="../src/js/swiper.js" type="text/javascript"></script>
<!-- js文件 -->
<script>
  var Swiper = window.Swiper;
</script>

1
2
3
4
5
6
7

问题在于：没有正确引入js导致Swiper没有绑定到window上(swiper.js的文件尾有一行代码window.Swiper = Swiper;)

详细内容请查看swiper.js-3.4.2 (opens new window)

// <!-- PlanB -->
import Swipre from "./swiper.js"

1
2

问题在于swiper.js中并没有使用export，所以在文件中使用import导入是不正确的。

所以，这两种方法，都是不可以的。

# 再一次的尝试

我想了想，猜测可能是引入文件的类型与jsx不一致，即：type=text/javascript，不被当前环境认可的。

所以，我把类型换成type=text/babel，报错信息消失，但是由于文件并不是babel语法的，程序并没有执行。

之后，我尝试了绝对路径：<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.js"></script>，并没有报错。

想不到为什么，可能是智商下线了......

# 解决

# PlanA

在成功调用了js之后（使用绝对路径引用js），由于swiper.js文件中包括了window.Swiper = Swiper;这样一句，所以在引用时只需要var Swiper = window.Swiper;即可。

# PlanB

自行修改相关js文件，在swiper.js里增加export。

# PlanC

使用npm包，Swiper-Github (opens new window)。

鹿酒的博客