版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kai_vin/article/details/88722672
如果你喜欢这系列的文章,欢迎star
我的项目,源码地址,点击这里
引入npm
包管理的第三方插件库
对于第三方插件库,用到最多的莫过于jquery
了~,就先以jquery为例,因为是要全局使用,所以需要将其暴露给全局,网上有很多种配置方法,但是觉得最靠谱的应该就是接下来要介绍的这种,需要使用到expose-loader
:
yarn add jquery -S
yarn add expose-loader -D
首先修改webpack.dev.conf.js
文件,在rule
中添加如下代码:
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
然后只需要在你的js
文件中导入jquery
即可:
require('jquery');
就是这么简单就可以随心所欲的使用jquery
了~
那么这是对可以通过包管理下载的第三方库,如果是包管理没有的第三方库,直接引入就行只是会有些注意的地方
引入非npm
模块的第三方插件库
在很多网页上需要用到一些特效,如果不去使用那些集成的Ui
库的话,需要自己去找那些有丰富特效的第三方插件,我最常用到的一个就是大话主席的SuperSlide
第三方插件库。而这个是不能通过npm
下载的,需要网上找资源下载到本地,并放到自己的项目中。
这种插件的引用需要注意点:
- 直接在入口
js
文件中引入就行,但是只能通过require
引入,而不能通过import
引入,至于为什么,我也不知道,import
引入,浏览器会报错undefind
require('./assets/js/jquery.SuperSlide.2.1.1.js');
- 引入后,如果直接就
yarn start
会报错,因为缺少core-js
,所以还需要下载该插件
yarn add core-js =-D
- 该插件库是依赖于
jquery
的,所以其引入必须放在jquery
的引入下方,才会生效 - 该插件库只支持到
jquery
的2.x
版本,所以如果要用到该插件,则只能下载2.x
版本的jquery