引入第三方组件

本文介绍在第三方组件提供了 npm 包或 min.js 时，在系统中如何引入该组件。

因为 npm 包中的源代码可能比较散、比较大，或者依赖比较多，比较深，造成安装后引的文件可能非常多，会影响 Git，影响保存，因此推荐使用引入 min.js 的方案。

下面以水印组件为例讲解引入的方法。

引入 min.js（推荐）

在 https://www.jsdelivr.com/ 网站上可以找到水印组件的 min.js，下载后放到 UI2/pcx/js 目录下，在 js 文件中引用

import {Watermark} from "$UI/pcx/js/watermark-2.3.0";

引用后即可使用，运行效果

有些组件的 min.js 里面包含适配多场景的代码，如下图中的13行到18行。

这些代码在 webpack 时会出错，有两种处理方式

• 只保留其中适配 es6 模块化的代码，其它代码删除。上图中蓝色区域的代码是适配 es6 的代码，复制它成为第12行
• 不修改 js 文件，将 js 文件放到 UI2/pcx/node_modules 目录下使用

引入 npm 包

• 安装 npm 包

npm install @pansy/watermark --save

• 复制安装后生成的 node_modules 目录到 UI2/pcx 目录下

• 在 js 文件中引用

import { Watermark } from '@pansy/watermark';

• 引用后即可使用，运行效果