[前端] Vue封装播放器+打包+上传NPM

一、使用icomoon

1.生成和下载图标相关文件

先使用icomoon获取我们要使用的图标，例如播放、暂停、停止、全屏等图标。

icomoon网站：https://icomoon.io/app/#/select

在其中选择我们需要的图标：

 然后点击右下角的 "Generate Font"：

将我们图标的名字修改成自己想要的。

然后点击右下角的 "Download"。会帮我们下载一个zip压缩包。

解压，获取以下文件：

2.使用style.css

将style.css文件和fonts文件夹拷贝到项目中（路径自己决定）：

在main.js中导入style.css：

import "./styles/style.css"

导入后，就可以使用图标了。

二、自定义播放器代码结构

1.基本代码结构

MyVideo.vue：

这是自定义播放器的基本代码结构，其中我们使用class指定了几个icomoon图标。

2.当前效果

三、实现controls中的各功能

四、打包组件

1.打包环境

由于新版本的vue-cli使用webpack模板创建的vue环境，打包一直出错，所以我们在这里选择使用webpack-simple模板创建的环境作为打包环境。

webpack模板和webpack-simple模板有一些不同，例如配置文件的结构。我们以webpack-simple模板环境为例：

2.components中的index.js

import MyVideo from './MyVideo.vue'

MyVideo.install = function (Vue) {
  if (this.installed) return;
  Vue.component(MyVideo.name, MyVideo)
};

// auto install
if (typeof window !== 'undefined' && window.Vue) {
  MyVideo.install(window.Vue);
}

export default MyVideo

3.修改webpack.config.js配置文件

module.exports = {
  entry: './src/components/index.js',
  externals:{
    vue:'vue'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'MyVideo.js',
    library:'MyVideo',
    libraryTarget:'umd',
    umdNamedDefine: true
  },  
  ...
  ...

entry要修改为我们需要打包的组件同目录下的index.js（该文件编写参考2.节）

externals是排除不需要打包的组件，这里指定vue不打包

output设置输出目录以及输出名称为MyVideo.js

这里注意：

如果打包的组件中使用了一些特殊的文件，例如ttf字体文件等，我们需要安装对应的loader来对其进行处理，在该配置文件中需要添加对应的配置，例如：

{
  test: /\.(woff2?|eot|ttf|otf)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

4.修改package.json配置文件

{
  "name": "leeoovideo123",
  "main": "dist/MyVideo.js",
  "description": "Leeoo Video Component",
  "version": "1.0.0",
  "author": "leokale",
  "license": "MIT",
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --display-error-details --config webpack.config.js"
  },
  "files": [
    "dist"
  ],
  ...
  ...

标黄部分都很重要：

name表示上传包的名称（放在npm仓库中的名称），下载时也是指定这个名字。注意，名字中不能有大写，例如leeooPlayer就不行。

main表示上传哪个文件

private设置非私有

files表示要打包的目录，这里我们只打包了dist目录，如果该组件使用到了其他的文件，例如字体文件在assets目录中，css文件在src/styles目录中，则都需要打包进去：

"files": [
    "dist",
    "assets",
    "src/styles"
],

如果文件没打包齐全，可能组件的样式，字体，图标等无法正确显示。

5.编写README

对于组件的安装和使用方法，可以写到README文件中。

README的内容会显示在npm网站中。

6.打包

配置文件修改完毕后，使用命令进行打包：

npm run build

会在dist目录中生成js文件：

至此，组件打包完毕。

五、上传到npm仓库

1.注册npm

npm网站：https://www.npmjs.com/

1）注册个人账号

2）认证邮箱（一定要去邮箱里点击链接认证）

2.上传组件

1）运行命令登录：

npm login

按提示输入npm的账号密码和邮箱。

2）在项目目录下运行命令

npm publish

上传成功后，可以在npm网站的个人packages中查看到上传成功的包。

如果上传的组件名（package.json中配置的name）与仓库中已存在的包名字相同或很像，则会提示报错，需要重新修改名称再上传。

3）删除包

npm unpublish

注意，删除包后，如果再上传同名字的包会有24小时的限制。

3.更新组件版本

只需要保证上传组件的名称一致，然后修改package.json的版本，重新打包上传即可。

六、下载和使用包

1.npm安装

npm i leeoovideo123 -S

2.cnpm安装

cnpm每10分钟从npm同步数据，所以10分钟后cnpm就可以安装我们上传的包了

cnpm i leeoovideo123 -S

3.检查包是否安装

在node_modules目录下可以找到我们安装的包：

在检查package.json：

"dependencies": {
  "leeoovideo123": "^1.0.0",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1"
},

如果没有对应的配置，可以手工添加。

4.导入和使用包

在main.js中：

import MyVideo from 'leeoovideo123'
import 'leeoovideo123/src/styles/style.css'
Vue.use(MyVideo)

这里注意，虽然我们上传到npm的包名是"leeoovideo123"，但是组件的名称实际上是"MyVideo"。

所以，我们在使用的时候一定要导入"MyVideo"。

尽量在打包时保证组件名与包名一致，以免使用不便（可以在ReadMe中说明）。

在我们的组件App中使用：

// App.vue

页面效果：

 

 (✿◠‿◠)