uni-using-components-webpack-plugin

uni-using-components-webpack-plugin

配合 UniApp，用于集成小程序原生组件，解决两个问题：

• 配置第三方库后可以自动引入其下的原生组件，而无需手动配置
• 生产构建时可以自动剔除没有使用到的原生组件

使用

安装

npm install uni-using-components-webpack-plugin --save-dev

然后将插件添加到 WebPack Config 中。例如：

const UniUsingComponentsWebpackPlugin = require('uni-using-components-webpack-plugin')

module.exports = {
    plugins: [
        new UniUsingComponentsWebpackPlugin({
            patterns: [
                {
                    prefix: 'van',
                    module: '@vant/weapp',
                },
                {
                    prefix: 'i',
                    module: 'iview-weapp',
                },
            ],
        }),
    ],
}

注意：uni-using-components-webpack-plugin 只适用在 UniApp 开发的小程序。

参数

Name	Type	Description
patterns	{Array}	为插件指定相关

Patterns

module	prefix
模块名	组件前缀

module 是指 package.json 里面的 name，如使用是 Vant 对应的 module 为@vant/weapp，如果使用是 iview，刚对应的 module 为 iview-weapp，具体可看它们各自的 package.json。

prefix 是指组件的前缀，如 Vant 使用是 van 开头的前缀，iview 使用是 i 开头的前缀，具体可看它们各自的官方文档。

背景介绍

第一个痛点

用 uniapp开发小程序的小伙伴应该知道，我们在 uniapp 中要使用第三方 UI 库(vant-weapp，iView-weapp)的时候 ，想要在全局中使用，需要在 src/pages.json 中的 usingComponents 添加对应的组件声明，如：

// src/pages.json
"usingComponents": {
    "van-button": "/wxcomponents/@vant/weapp/button/index",
  }

但在开发过程中，我们不太清楚需要哪些组件，所以我们可能会全部声明一遍（PS:这在做公共库的时候更常见)，所以我们得一个个的写，做为程序员，我们绝不允许使用这种笨方法。这是第一个痛点。

第二个痛点

使用第三方组件，除了在 src/pages.json 还需要在对应的生产目录下建立 wxcomponents，并将第三方的库拷贝至该文件下，这个是 uniapp 自定义的，详细就见：https://uniapp.dcloud.io/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84。

这是第二个痛点。

第三个痛点

第二痛点，我们将整个UI库拷贝至 wxcomponents，但最终发布的时候，我们不太可能全都用到了里面的全局组件，所以就将不必要的组件也发布上去，增加代码的体积。

有的小伙伴就会想到，那你将第三方的库拷贝至 wxcomponents时候，可以只拷使用到的就行啦。是这理没错，但组件里面可能还会使用到其它组件，我们还得一个个去看，然后一个个引入，这又回到了第一个痛点了。

有了这三个痛点，必须得有个插件来做这些傻事，处理这三个痛点。于是就有 UniUsingComponentsWebpackPlugin 插件，这个webpack 插件主要解决下面几个问题：

• 配置第三方库后可以自动引入其下的原生组件，而无需手动配置
• 生产构建时可以自动剔除没有使用到的原生组件

License

MIT