TypeScript学习笔记（三）

TypeScript学习笔记（三）

webpack打包ts代码

直接使用ts编译器的时候比较少，大型项目都是用打包工具

新建项目

# 对项目初始化，生成一个package.json
$ npm init -y

# cnpm是npm的国内镜像，快一些
$ npm install -g cnpm -registry=https://registry.npm.taobao.org
# 添加webpack使用的一些依赖
# i 是install -D是指开发依赖，webpack-cli是他的命令行工具, typescript是ts核心包，ts-loader是webpack的加载器
$ cnpm i -D webpack webpack-cli typescript ts-loader   

这里会自动生成一个package.json文件，然后在package.json里查看

 "devDependencies": {
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.5",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2"
 }

新建一个js文件：webpack.config.js, 目前的内容是基本的配置信息

/**
 * @title: webpack.config
 * @description: webpack配置文件
 * @author: lannisite
 * @Date: 2021/7/22
 */

//  引入一个包,一个js模块，用来给我们拼接路径
const  path =  require('path');

//  webpack 中的所有配置信息都应该module.exports中
module.exports = {

    //  指定入口文件,就是打包的输入文件
    entry:"./src/index.ts",

    //  指定打包文件所在目录
    output: {
        //  指定打包文件的目录
        //  第一种写法,直接写
        // path: "./dist"
        //  第二种写法,把完整路径拼起来
        path: path.resolve(__dirname,'dist'),

        //  打包后的文件名
        filename: "bundle.js"
    },

    //  指定webpack打包时要使用的模块
    module: {
        //  指定要加载的规则
        rules: [
            {
                //  test指定的是生效的文件，test里面是一个正则表达式,指定以ts结尾的文件，使用ts-loader进行打包
                test: /\.ts$/,
                use: 'ts-loader',

                //  要排除的文件，一般排除node
                exclude: /node-modules/
            }
        ]
    }
};

以上只进行了webpack的配置，还需要对ts的编译规范进行约束，然后在根目录下创建一个tsconfig.json文件配置如下

{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015", 
    "strict": true
  }
}

然后再package.json的"scripts"里面加一条build命令，结果如下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

到这里配置好了之后，直接用在terminal里输入命令：

$ npm run build

就可以使用webpack工具进行打包,我运行了一下报了个warning：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

是说有一个属性教mode没有添加，然后添加上：

mode: 'development',

再执行就可以了，可以在项目根目录下看到dist目录出现，虽然里面的bundle.js是空的，因为我们什么都没写。

webpack配置知识点

文件目前已经转换为js，现在还需要让他运行在网页里，虽然可以直接创建html文件，但是不想这么做。

我们希望html文件是由webpack自动创建的，创建完之后，引入的资源是他根据我们项目做的调整。

这里我们需要使用安装一个webpack的插件，上命令：

# 插件的效果就是自动的帮助我们生成html文件
$ cnpm i -D html-webpack-plugin

下载完成后，在package.json文件里就多了这个选项，然后我们切换到webpack.config.js文件，对其进行配置

//  引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

然后在后面配置使其生效，在modules对象同级写一个plugins对象，其内容：

//  配置webpack插件
    plugins: [
        //  创建一个新对象
        new HTMLWebpackPlugin(),
    ]

引入之后，再使用命令对项目进行构建；

之后会在dist目录下看见一个index.html文件。

如果想对自动生成的html文件进行，例如title，可以在刚刚的plugin调用里加一个对象如下：

plugins: [
    //  创建一个新对象
    new HTMLWebpackPlugin({
        title: "Webpack demo"
    }),
]

还可以在项目的任意位置指定一个html模版:

新建一个html，把自己想要的样式写进去，然后回到webpack.config文件，配置如下：

//  配置webpack插件
    plugins: [
        //  创建一个新对象
        new HTMLWebpackPlugin({
            //title: "Webpack demo"
            template: "./src/index.html"
        }),
    ]

我们希望服务器可以自动察觉我们代码的修改，然后自动打包并把修改同步到浏览器，我们需要继续装插件：

#	webpack的开发服务器
$ cnpm i -D webpack-dev-server
# 安装后相当于内置了一个webpack服务器

然后去package.json文件去设置一个命令：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "start": "webpack serve --open chrome.exe"
},

这样npm的start命令就变成了启动webpack serve，然后去terminal里面执行npm start就可以启动。

按F12可以看看Live Reloading enabled字样，就是说浏览器是在实时更新的。

尝试修改index.ts文件，浏览器会自动对其进行修改。

再介绍一个新插件：

以前的编译使用的是对旧文件进行覆盖方式，有时候不够有效。

现在安装一个插件，在编译之前先把旧文件目录进行删除，安装命令：

$  cnpm i -D clean-webpack-plugin

然后在webpack.config.js文件进行引入：

//  引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

//	在plugins：配置里面加入clean
//  配置webpack插件
    plugins: [
        
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            //title: "Webpack demo"
            template: "./src/index.html"
        }),
    ]

然后执行看看效果，就是会把旧目录进行清空。

还有一个新问题：

就是模块引入的时候，index文件引入其他ts文件，会报错，因为默认情况webpack不知道ts可以作为模块引用，所以我们要进行配置。

转到webpack中,在与plugins平级的对象下添加：

//  用来设置引用模块
    resolve: {
        //  属性叫做扩展名，凡是以ts或js结尾的文件都可以作为模块使用
        extensions: ['.ts','.js']
    }

然后再进行npm run build 就不会报错啦！

以上把webpack最必要的配置都配置好了。

但是还有一个兼容性问题，因为都是新版本的代码，所以我们还需要引入一个工具，就是把代码改为各个版本可以使用的代码。

版本兼容性配置

引入一个插件，可以和webpack一起去使用，去适应不同的es版本。

在ts的tsconfig配置文件里可以进行一些目标语法版本的转换，但是对于一些复杂的功能，不能够仅仅通过语法进行转换。

这时候就需要引入我们的插件，可以把一些新语法转换成就语法，把新技术转换成旧版本可以支持的技术。

下载安装：

$ cnpm i -D @babel/core @babel/preset-env babel-loader core-js

# core:babel核心
#	preset-env:预先设置的环境，装它为了方便转换环境
# babel-loader：类似loader的用来把插件和webpack和babel做一个结合的工具
# 模拟js运行的，作用可以使老版本的浏览器使用的新版本的技术（为浏览器提供一个新的），一会babel会有一个加载选项按需选择js版本

配置

因为这是引入一个模块，所以不需要新建对象，直接在module.exports里面配置，然后转到module属性，配置里面的规则，加载的对象依然是ts文件不需要改，使用的加载器需要添加一下，加载器的执行从后往前进行的，先使用ts-loader转换成js，然后再使用babel转换js版本。

简单的rule修改配置如下，加一个loader：

//  所用到的加载器，数组，执行的时候从后往前执行，在前面的先执行
                use:[
                    'babel-loader',
                    'ts-loader'
                ],

但是babel需要更多更仔细配置，所以这里需要创建一个对象进行配置：

//  所用到的加载器，数组，执行的时候从后往前执行，在前面的先执行
                use:[
                    //  配置我们的babel
                    {
                        //  配置加载器
                        loader: "babel-loader",

                        //  设置babel
                        options: {
                            //  设置预定义的环境，假设我们的代码要在哪些浏览器中运行
                            presets:[
                                [
                                    //  指定我们的环境插件
                                    "@babel/preset-env",

                                    //  配置信息，整体又是一个对象（套娃不止）
                                    {
                                        //  targets:要兼容的目标浏览器,
                                        targets:{
                                            "chrome":"88"
                                        },
                                        //  指定的core.js版本
                                        "corejs":"3",
                                        //  使用core-js的方式 usage表示按需加载，并不一次性全部引入功能，节约内存
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ]

babel处理一些老版本问题的方式是通过在corejs里面实现一些老版本没有的功能，进而去弥补。

此外，例如箭头函数（lamda表达式？）会被转换成普通函数，但是兼容ie11的时候，webpack自带的立即执行函数依然是使用箭头函数。所以还需要单独配置。

在webpack.config.js文件里output属性里添加：

//  配置打包的环境，
        environment: {
            // 告诉webpack不使用箭头函数
            arrowFunction: false
        }

此时再看编译后的结果，生成的js文件就不会有箭头函数了。

P.S.

包说明：

package.json:

相当于添加依赖的包，安装的各种插件和工具可以看到，一般不需要修改

一般查看和配置插件版本的时候可以来这里查看版本

tsconfig.json:

TS的版本控制，部分时候需要手动修改

webpack.config.js:

webpack配置文件，引入模块和插件需要从这里添加，module.exports是主要修改对象，包含了webpack所有的配置。

引入插件时一般需要新建对象，引入模块的时候在module.exports里进行配置