webpack怎么引入第三方js库

Webpack 引入第三方 JS 库的几种方法包括：使用 npm 安装并引入、通过 script 标签全局引入、使用 externals 配置、通过 CDN 引入等。最常用的方法是通过 npm 安装并在代码中通过 import 或 require 引入，这种方法有利于模块化管理和打包优化。下面详细介绍这一方法。

一、使用 NPM 安装并引入

通过 npm 安装第三方库并在代码中引入是最常见且推荐的方式。这种方法有助于版本管理和依赖管理。假设我们要引入 Lodash 库，具体步骤如下：

安装 Lodash

在项目根目录下运行以下命令：
```
npm install lodash
```

在代码中引入 Lodash

在需要使用 Lodash 的文件中，通过 import 或 require 引入：

// 使用 ES6 模块导入
import _ from 'lodash';
// 使用 CommonJS 导入
const _ = require('lodash');

使用 Lodash

引入后即可在代码中使用 Lodash 提供的各种方法：

const array = [1, 2, 3, 4, 5];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);

二、通过 Script 标签全局引入

这种方法适用于一些简单的项目或者一些不需要模块化管理的第三方库。具体步骤如下：

下载第三方库

下载需要引入的第三方库的 JS 文件，并放在项目的某个目录下，比如 libs 目录。

在 HTML 中引入

在 index.html 中通过 <script> 标签引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./libs/lodash.min.js"></script>
    <script src="./dist/bundle.js"></script>
</body>
</html>

在代码中使用

由于通过 <script> 标签引入的是全局变量，因此在代码中可以直接使用：
```
const array = [1, 2, 3, 4, 5];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);
```

三、使用 Externals 配置

这种方法适用于需要减少打包体积的场景。通过 externals 配置，可以将某些模块声明为外部依赖，使得这些模块在打包时不会被打入 bundle 中，而是通过外部资源引入。

下载第三方库

同样需要下载需要引入的第三方库的 JS 文件，并放在项目的某个目录下，比如 libs 目录。

在 HTML 中引入

在 index.html 中通过 <script> 标签引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./libs/lodash.min.js"></script>
    <script src="./dist/bundle.js"></script>
</body>
</html>

配置 Webpack

在 webpack.config.js 中配置 externals：

module.exports = {
    // ...其他配置
    externals: {
        lodash: '_'
    }
};

在代码中使用

由于通过 <script> 标签引入的是全局变量，因此在代码中可以直接使用：
```
const array = [1, 2, 3, 4, 5];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);
```

四、通过 CDN 引入

这种方法适用于需要使用 CDN 优化加载速度的场景。具体步骤如下：

在 HTML 中引入

在 index.html 中通过 <script> 标签引入 CDN 地址：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="./dist/bundle.js"></script>
</body>
</html>

配置 Webpack

在 webpack.config.js 中配置 externals：

module.exports = {
    // ...其他配置
    externals: {
        lodash: '_'
    }
};

在代码中使用

同样，由于通过 <script> 标签引入的是全局变量，因此在代码中可以直接使用：
```
const array = [1, 2, 3, 4, 5];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray);
```

五、通过 Webpack 插件

有些第三方库提供了专门的 Webpack 插件，可以简化引入过程。例如，对于一些需要在全局范围内使用的库，可以使用 ProvidePlugin 来自动加载模块，而不需要在每个文件中手动引入。

安装第三方库

假设我们需要引入 jQuery，可以通过 npm 安装：
```
npm install jquery
```

配置 Webpack

在 webpack.config.js 中配置 ProvidePlugin：

const webpack = require('webpack');
module.exports = {
    // ...其他配置
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
};

在代码中使用

由于 ProvidePlugin 会自动加载 jQuery，因此可以在代码中直接使用 $ 或 jQuery：
```
$(document).ready(function() {
    console.log('jQuery is ready!');
});
```

六、总结

在 Webpack 项目中引入第三方 JS 库有多种方法，每种方法都有其适用的场景。通过 npm 安装并引入、通过 script 标签全局引入、使用 externals 配置、通过 CDN 引入以及通过 Webpack 插件都是常用的手段。综合来看，通过 npm 安装并引入是最推荐的方式，因为它有助于模块化管理和依赖管理。对于一些需要在全局范围内使用的库，可以结合 ProvidePlugin 来简化引入过程。无论选择哪种方式，都需要根据具体项目需求进行合理选择。

此外，对于团队协作和项目管理，可以考虑使用一些项目管理系统来提高效率和规范化管理。推荐使用研发项目管理系统 PingCode和通用项目协作软件 Worktile，这两款系统在项目管理和团队协作方面表现出色，能够有效提升团队的工作效率和项目质量。

相关问答FAQs：

1. 如何在Webpack中引入第三方JavaScript库？
Webpack是一个模块打包工具，可以将各种资源打包成一个或多个bundle文件。要在Webpack中引入第三方JavaScript库，需要按照以下步骤进行操作：

Step 1：安装第三方库
首先，使用npm或yarn安装需要的第三方JavaScript库。例如，如果要引入jQuery库，可以运行以下命令：

npm install jquery

Step 2：配置Webpack
接下来，在Webpack的配置文件中进行相应的配置。通过在配置文件中的module.exports中添加externals字段，告诉Webpack哪些模块是外部引入的。例如，如果要引入jQuery库，可以这样配置：

module.exports = {
  // ...
  externals: {
    jquery: 'jQuery'
  },
  // ...
};

Step 3：在代码中使用第三方库
现在，可以在代码中使用第三方库了。在需要使用第三方库的地方，使用import或者require语句引入库。例如，如果要在某个文件中使用jQuery库，可以这样写：

import $ from 'jquery';

这样，Webpack会自动从外部引入的库中获取相应的模块，而不会将它打包进最终的bundle文件中。

2. 如何在Webpack中引入非NPM的第三方JavaScript库？
除了从NPM或yarn安装第三方JavaScript库外，有时候也需要引入非NPM的第三方库。在Webpack中引入非NPM的第三方库的步骤如下：

Step 1：下载第三方库
首先，从第三方库的官方网站或其他可靠来源下载所需的库文件。
Step 2：将库文件放置在项目中
将下载的库文件放置在项目中的合适位置，例如放置在项目的static文件夹下。
Step 3：配置Webpack
在Webpack的配置文件中进行相应的配置。通过在配置文件中的module.exports中的externals字段中添加一个键值对，告诉Webpack哪些模块是外部引入的。例如，如果要引入一个名为exampleLib的库，可以这样配置：

module.exports = {
  // ...
  externals: {
    'exampleLib': 'exampleLib'
  },
  // ...
};

Step 4：在代码中使用第三方库
现在，可以在代码中使用第三方库了。在需要使用第三方库的地方，使用import或者require语句引入库。例如，如果要在某个文件中使用exampleLib库，可以这样写：

import exampleLib from 'exampleLib';

这样，Webpack会自动从外部引入的库中获取相应的模块，而不会将它打包进最终的bundle文件中。

3. 如何在Webpack中引入CDN上托管的第三方JavaScript库？
有时候，我们希望从CDN上托管的第三方JavaScript库进行引入，以加快网页加载速度。在Webpack中引入CDN上托管的第三方JavaScript库的步骤如下：

Step 1：在HTML文件中引入CDN链接
首先，在HTML文件中添加一个<script>标签，将CDN链接添加到src属性中。例如，如果要引入jQuery库，可以这样写：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Step 2：配置Webpack
在Webpack的配置文件中进行相应的配置。通过在配置文件中的module.exports中的externals字段中添加一个键值对，告诉Webpack哪些模块是外部引入的。例如，如果要引入jQuery库，可以这样配置：

module.exports = {
  // ...
  externals: {
    'jquery': 'jQuery'
  },
  // ...
};

Step 3：在代码中使用第三方库
现在，可以在代码中使用第三方库了。在需要使用第三方库的地方，使用import或者require语句引入库。例如，如果要在某个文件中使用jQuery库，可以这样写：

import $ from 'jquery';

这样，Webpack会自动从CDN链接中获取相应的模块，而不会将它打包进最终的bundle文件中。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3901403