引入第三方组件

本文介绍在第三方组件提供了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包

1. 安装npm包

    npm install @pansy/watermark --save
   

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

1. 在js文件中引用

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

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