TypeScript组件化实现弹层播放器

一、简介

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。

• TypeScript可以再任何浏览器、任何计算机和任何操作系统上运行，并且是开源免费的。

为什么要使用TypeScript？

• TypeScript可以提供静态类型检查，规范团队的编码及使用方式，适合大型项目的开发。
• IDE的友好提示，也是适合大型项目的开发。

项目已上传优快云:点击访问

二、Webpack搭建项目环境

1、提前安装好node.js和npm

2、新建一个空文件夹，自定义命名(此处命名为miProject)
(1)在cmd进入该文件夹，创建该文件夹的配置文件（命令：npm init -y）

(2)局部安装webpack和webpack-cli（命令：npm i -D webpack webpack-cli）

(3)用VsCode打开该文件夹，创建一个webpack的配置文件：webpack.config.js

const path = require('path');

module.exports = {
   
    entry : "./src/main.js",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    mode : "development"
};

(4)创建src文件夹，在src下创建mian.js和a.js，用于测试环境
a.js：

let a = 3;
export default a;

mian.js：

import a from './a.js';
console.log(a);

在package.json添加一个执行脚本：
命令行执行打包（命令：npm run build）：
可以再原工程项目中找到output文件dist，创建index.html：
选择在浏览器打开index.html，F12查看打印结果为3，表示环境搭建ok：
(5)将css文件作为模块打包
需要在工程中下载一个style-loader（命令：npm i -D style-loader css-loader），并在webpack.config.js中添加引入规则：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210202094040975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1MzU4Mg==,size_16,color_FFFFFF,t_70

const path = require('path');
module.exports = {
   
    entry : "./src/main.js",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    module : {
   
        rules : [
            {
   
                test : /\.css$/,
                use : ['style-loader','css-loader'] 
            }
        ]
    },
    mode : "development"
};

在src下创建一个a.css，在main.js中引入：

再次在浏览器中打开index.html，可以看到css引入成功：
3、webpack的插件使用
A、自动引入插件
(1)安装命令：npm i -D html-webpack-plugin

(2)安装完毕后需要在webpack.config.js中引入调用

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   
    entry : "./src/main.js",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    module : {
   
        rules : [
            {
   
                test : /\.css$/,
                use : ['style-loader','css-loader'] 
            }
        ]
    },
    plugins : [
        new HtmlWebpackPlugin({
   
            template : "./src/index.html"
        })
    ],
    mode : "development"
};

(3)删除掉原来的dist文件，在src下新建一个index.html，重新打包项目

运行npm run buile打包命令之后打开新生成的dist文件夹下的index.html，发现main.js已经被自动引入了：
B、自动清理插件
(1)作用
当s工程目录下文件名修改之后再次打包时，它会先清理dist文件在重新生成
(2)安装命令：npm i -D clean-webpack-plugin

(3)安装完毕后需要在webpack.config.js中引入调用

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
   
    entry : "./src/main.js",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    module : {
   
        rules : [
            {
   
                test : /\.css$/,
                use : ['style-loader','css-loader'] 
            }
        ]
    },
    plugins : [
        new HtmlWebpackPlugin({
   
            template : "./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],
    mode : "development"
};

4、webpack-dev-server的使用
(1)功能作用

• 为静态文件提供web服务
• 自动刷新和热替换(HMR)
  –自动刷新指当修改代码时webpack会进行自动编译，更新网页内容
  –热替换指运行时更新各种模块，即局部刷新

(2)安装命令：npm i -D webpack-dev-server
(3)安装完毕后需要在webpack.config.js中引入调用

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
   
    entry : "./src/main.js",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    devServer : {
   
        contentBase : "/dist",
        open : true
    },
    module : {
   
        rules : [
            {
   
                test : /\.css$/,
                use : ['style-loader','css-loader'] 
            }
        ]
    },
    plugins : [
        new HtmlWebpackPlugin({
   
            template : "./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],
    mode : "development"
};

在package.json中添加新的启动方式：
在cmd运行命令npm start即可启动并自动启动服务器访问index.html。
5、支持字体图标的使用
推荐网址：点击访问
(1)安装file-loader（命令：npm i -D file-loader）

(2)在wackpack.config.js中配置规则

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
   
    entry : "./src/main.js",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    devServer : {
   
        contentBase : "/dist",
        open : true
    },
    module : {
   
        rules : [
            {
   
                test : /\.css$/,
                use : ['style-loader','css-loader'] 
            },
            {
   
                test : /\.(eot|woff2|woff|ttf|svg)$/,
                use : ['file-loader']
            }
        ]
    },
    plugins : [
        new HtmlWebpackPlugin({
   
            template : "./src/index.html"
        }),
        new CleanWebpackPlugin()
    ],
    mode : "development"
};

(3)将iconfgnt网站上我的项目中图标下载到本地


修改a.css文件路径问题：
(4)图标的使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        hello
        <i class="iconfont iconyinliang"></i>
        <i class="iconfont iconguanbi"></i>
    </body>
</html>

启动项目npm start，可以看到图标加载成功：
6、支持TypeScript的使用
(1)安装命令：npm i -D ts-loader typescript

• 能够将ts文件转为js
  (2)在wackpack.config.js中配置规则

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
   
    entry : "./src/main.ts",
    output : {
   
        path : path.resolve(__dirname , 'dist'),
        filename : "main.js"
    },
    devServer : {
   
        contentBase : "/dist",
        open :