1 概述
使用第三方库时,一般都需要用import from
的形式来导入,但是有些库不想每次使用都导入,比如jQuery
,希望把它当做内置对象一样使用。下面介绍如何实现这种“内置对象”般体验。
第三方库一般使用:
import $ from "jquery"//es6语法
console.log("jquery",$)
2 将对象绑定到window
1. expose-loader
暴露 全局的loader
如果你希望下面这段代码能生效:
import $ from "jquery"//es6语法
console.log("jquery",window.$)
就需要用到expose-loader
2. 安装
npm install expose-loader -D
3. 配置
1. 内联配置
在import的时候通过配置语法绑定到window
如:
import $ from "expose-loader?exposes=$,jQuery!jquery";
console.log("jquery",window.$)
但此方法在我的VSCode中会报错
'$' is declared but its value is never read.ts(6133)
Unexpected '!' in 'expose-loader?exposes=$,jQuery!jquery'. Do not use import syntax to configure webpack loaders.eslintimport/no-webpack-loader-syntax
Peek Problem (⌥F8)
Quick Fix... (⌘.)
官方建议用webpack loader配置的形式。
2. webpack配置
在webpack中添加如下配置:
module.exports = {
module: {//模块
rules: [//规则,多个loader
{
test: require.resolve("jquery"),//判断如果代码中引入了jquery
loader: "expose-loader",//就使用expose-loader 将jQuery输出成$并绑定在window上
options: {
exposes: ["$", "jQuery"],
},
},
]
}
}
4. 生效
源代码:
import $ from "jquery"//es6语法
console.log("jquery",window.$)
运行
npm run dev
查看是否打印出jquery
方法
3 将对象绑定全局
能不能不调用import
也能让下面代码生效呢?
console.log("jquery",$)
答案是可以的。
1. 配置
在webpack文件中添加如下配置:
const webpack = require('webpack')
module.exports = {
plugins: [//存放所有插件
new webpack.ProvidePlugin({//将jquery在每个模块都注入成 $
$: "jquery"
})
],
}
注意:
这里的
const webpack = require('webpack')
不能写成:
const {webpack} = require('webpack')
否则会报错:
TypeError: webpack.ProvidePlugin is not a constructor
> mm_webpack@0.1.0 dev /Users/maomao/Documents/demo/h5/mm_webpack
> webpack-dev-server --config webpack.config.js
/Users/maomao/Documents/demo/h5/mm_webpack/webpack.config.js:49
new webpack.ProvidePlugin({
^
TypeError: webpack.ProvidePlugin is not a constructor
at Object.<anonymous> (/Users/maomao/Documents/demo/h5/mm_webpack/webpack.config.js:49:5)
2. 生效
保存webpack文件,重启服务运行。
npm run dev
查看代码是否生效。
以上 2(将对象绑定到window)、3(将对象绑定全局)两种方法配置都加入,可以在不引用import
的情况下,随意使用$
下面代码直接可以生效:
console.log("jquery",window.$)
// eslint-disable-next-line no-undef
console.log("jquery",$)
4 第三方库去重
有时候第三方库在html页面里面已经导入过一次了,如果代码里面调用import
会导致该库被下载两次并打包到文件中。
为了避免这种情况,我们需要在webpack中进行配置。
1. 配置
在webpack中添加配置:
module.exports = {
externals: {
jquery: "$",
},
}
2. 生效
1、先在代码中引入jquery
(示例库)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、js源码中添加import
import $ from "jquery"//es6语法
console.log("jquery",$)
3、执行打包命令:
npm run build
在配置之前先打包一次,查看输出的js文件大小。
配置之后再执行一次打包脚本,检查输出的js文件大小是否有变化。
完。
暂无评论