学习webpack4.x - 第三方库的使用

栏目: jQuery · 发布时间: 5年前

内容简介:...持续中=======================================================注意:开始之前以下内容之前,需要配置一些webpack的基础配置,传送门:

...持续中

=======================================================

第三方库的使用

注意:开始之前以下内容之前,需要配置一些webpack的基础配置,传送门: 学习webpack4.x - 基础配置

在项目中,经常会引用一些第三方模块, 比如jquery, lodash等,但是这些第三方模块怎么在webpack中配置呢?以jquery为例子:

首先先安装jquery:

yarn add jquery

方法一:直接引用

打开src/index.js文件,输入:

import $ from 'jquery';

console.log($);

尝试运行:npm run dev, 结果如下:

学习webpack4.x - 第三方库的使用

结果中会发现,已经引入完成了,在当前这个文件中可以随便使用jquery了。

但是这种方法是不能将jquery暴露到window全局的, 执行console.log(window.$),结果是undefined,那么怎么暴露到window呢?如下:

方法二:暴露到window

将第三方库暴露在全局可以用expose-loader, 下面通过这个将jquery变成 $ 暴露到window:

step1:配置webpack.config.js文件:

// 模块配置
module.exports = {
  module: {
    //...
    rules: [
      //...
      {
        test: require.resolve('jquery'),
        use: 'expose-loader?$'  //把jquery变成 $ 暴露到window
      }
    ]
  }
}

step2: 安装expose-loader

yarn add expose-loader -D

尝试运行:npm run dev, 这时候发现console.log(window.$)有值了!

以上两种做法很麻烦,要import $ from 'jquery'这样引入jquery, 那么怎么样能在不同模块直接使用 $ 而不引入jquery呢 ? 如下:

方法三:模块中注入

配置webpack.config.js文件:

let Webpack = require('webpack');

// 模块配置
module.exports = {
 //...

 //插件配置
  plugins: [
    //...
    // 注入对象
    new Webpack.ProvidePlugin({
      '$': 'jquery' //把jquery变成 $ 注入到模块
    })
  ]
}

只需要在webpack.config.js中这样配置下插件, 就可以直接在需要用到jquery的模块中使用$了, 而不用再通过import引入jquery,但是这种方法不能暴露到window中哦。

方法四:html中直接引入

这种方法是通过html的script标签,直接把第三方库引入进来,不需要yarn add去安装它,方法如下:

step1: 打开src/index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>丸子</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div>我通过script引入了一个jquery</div>
</body>
</html>

step2: 打开src/index.js,引入jquery

import $ from 'jquery';

console.log($)

step3: 配置webpack.config.js文件

module.exports = {
  //...
  //外部引入的,不要打包
  externals: {
    jquery: "$"
  }
  //...
}

这种方法中webpack.config.js中的externals的配置是告诉webpack,这个模块是第三方模块,不要打包进去,这样可以避免因打包进去而文件过大,造成资源浪费。同样,这种方法也是可以暴露给window的。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Understanding Machine Learning

Understanding Machine Learning

Shai Shalev-Shwartz、Shai Ben-David / Cambridge University Press / 2014 / USD 48.51

Machine learning is one of the fastest growing areas of computer science, with far-reaching applications. The aim of this textbook is to introduce machine learning, and the algorithmic paradigms it of......一起来看看 《Understanding Machine Learning》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具