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文件大小是否有变化。

完。