叮铃铃~🔔：一个Vue前端铃声/提示音组件

背景/前言

之前的一个功能需求，需要在页面接收消息，一旦有了新消息之后，需要用铃声进行提醒。

因为没有找到类似的比较便捷的组件，所以就自己写了一个。然后想着能不能尝试下做成难破mg5一个公共的webpack性能优化组件，发布出去让其webpack原理他开发者也用用？于是就试着写了一个项目（项目地址在最后），发布成了npm包。

虽然组件本身的开发很浏览器哪个好简单，但是浏览器历史上的痕迹在哪里从构建npm包到发布的整个流程，遇到的坑github官网还是很多的，涉及到了：

• 如何将一个Vue组件构建成github是什么可以直接引用的包
• 如何将镜像投屏这个组件写成类似插件的形式，让使用者能够直接全局使用
• 如何更改vue-cli配置，使得其打包构建的某个静态资源不需要带上hash版本
• 如何浏览器哪个好发布一个npm包

目前这个组件已经发布到了npm上，欢迎大家试用。如果有好的建议，或者找到了更好的类似组件，欢迎指出和分享~

下面是使用文档：

组件的使用

安装

npm i easy-ring

加载

1）全局使用

在vue-cli项目main.js上当作插件使用，即可直接在vue单文件组件使用

// main.js
import EasyRing from 'easy-ring'
Vue.use(EasyRing)

<!-- 直接使用，无需引入 -->
<template>
    <easy-ring
        :open="open"
        :ring="ring"
        :src="src"
    />
</template>
export default {
    ...
}

2）import方式

在vue单文件组件里引入

<template>
    <easy-ring
        :open="open"
        :ring="ring"
        :src="src"
    />
</template>
import EasyRing from 'easy-ring'
export default {
    components: {
        EasyRing
    }
    ...
}

组件生效

• 第镜像画面一步. 开启铃声：将open参数设为true
• 第二步. 响铃：将ring参数设为true
• 第三步. 关铃：将ring参数设为false

PS：

• 开启铃声这一步webpack打包流程，需要放到一个按钮下埋点进行触发（原因解女配美炸天释见下文 “关于open参数的解释”）。为了提升自己产品的使用体验，可以做到用户无感知，例如在登webpack性能优化录时，用户点击“登录”按钮即可设置open参数为true
• 根据自己的需求自行决定何镜像是什么意思时响铃、何时关铃，将ring参数的更改放到对应逻辑下即可

组件参数

使用默认音效

若想使用默认音效，请在./main.js文件中引入默认音效

// main.js
require('easy-ring/easy-ring-default.wav')

然后将这段浏览器哪个好代码合并到你的vue.config.js配置中:

configureWebpack: {
        module: {
            rules: [
                {
                    test: /easy-ring-default.(wav)$/i,
                    loader: 'file-loader',
                    options: {
                        name: 'media/[name].[ext]'
                    },
                },
          ]
        }
    }

需要添加这个配置的原webpack打包流程因是，vu女配美炸天e-cli默认会对所有打包的静态资源加上hash版本号，这样easy-ring就无法获取到你目录下的默认音频文件的地址。

加上这一项file-loader的配置后，easy-ring的默认音频文件就不会带上hash版本号，easy-ring就github官网登陆入口能找到它。

关于open参数的解释

因为当前多数浏览器不支持自动播放音频，需要用户自己主动触发播放音频才行。这一过程需要放在诸如click的交互事件里，因此我们需要一个按钮之类的东西来触发这一浏览器历史记录设置行为。

但是，你可以通过一些交互来设计这一行为，从而提升用户体验，甚至让用户对此无感知。例如：在登录时，在用户点击“登录”按钮时，在代码里设置open参数为true。

项目地址

github上的地址镜像文件：easy-ring

访问不了github的可以试试这个镜像地址：fagithub开放私库stgit镜像

一共有两个项目文件：

• easy-ring-build：构建npm发布包
• easy-ring-demo：使用范例

欢迎大家访问交流。相关的说明和介绍，可以分别去看它们里边的README.md