• webpack 创建typescript项目

    【视频链接】尚硅谷TypeScript教程（李立超老师TS新课）

    创建webpack 项目

    IDE：webstorm

    • 新建一个空的项目
    • 运行npm init初始化项目
    • 目录结构

    在这里插入图片描述

    1. 安装

    • webpack：构建工具
    • webpack-cli： webpack的命令行工具
    • typescript： ts编译器
    • ts-loader：ts加载器，用于在webpack中编译ts文件
    npm i -D webpack webpack-cli typescript ts-loader

    • 1
    • webpack中html插件，用来自动创建html文件
    npm i -D html-webpack-plugin 

    • 1
    • webpack-dev-server ：自动编译ts文件
    npm i -D webpack-dev-server 

    • 1
    • clean-webpack-plugin：webpack中的清除插件，每次构建都会自动清除上次编译后的文件
     npm i -D clean-webpack-plugin 

    • 1
    • 提高代码的兼容性，让代码可以在一些旧的浏览器中顺利运行
    npm i -D @babel/core @babel/preset-env babel-loader core-js

    • 1

    2. 配置文件

    • 在根目录创建webpack.config.js
    // 引入一个包
const path = require('path')
const HTMlWebpackPlugin = require('html-webpack-plugin')
// webpack中的所有的配置信息都应该写在moudle.exports中
module.exports = {
    // 当前为开发模式
    mode: 'development',
    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //  打包后文件的名字
        filename: "bundle.js",
       // 打包后文件不使用箭头函数
        environment: {
            arrowFunction: false
        },
    },

    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 要使用的loader
               use: [
                    // 将新版本的js转换为旧版本的js，提高代码的兼容性
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置上面这个加载器的配置项
                        options: {
                            // 设置预定义的环境（代码要在那些浏览器中运行）
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            'chrome':'88'
                                        },
                                        // 指定corejs的版本
                                        'corejs':'3',
                                        // 使用corejs的方式：usage 按需加载
                                        'useBuiltIns':'usage'
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader', // 将ts转换为js
                ],
                // 要排除的文件
                exclude: /node_moudles/
            }
        ]
    },

    plugins: [
        // 自动生成html文件，并且引入相关资源
        new HTMlWebpackPlugin({
            // 自动生成的网页以路径中的网页为模板，记得在该路径创建html文件
            template: "./src/index.html"
        }),
        // 自动清除上次编译后的文件
        new CleanWebpackPlugin(),
    ],

    // 设置那些文件可以作为模块可以被引用
    resolve: {
        extensions: ['.ts','.js']
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 创建ts的配置文件tsconfig.js
    {
  "compilerOptions": {
    "module": "ES6",
    "target": "ES6",
    "strict": true
  },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 在package.json文件中加入
      "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    3. 手动编译，运行

    npm run build

    • 1
    • 编译后可以在webpack.config.js文件的配置项output.path指向的路径中看到编译后的.js和.html文件，运行该目录下的html文件

    在这里插入图片描述

    4. 自动编译和运行

    npm start

    • 1

    在浏览器的开发者工具中可以看到一下内容，表示配置成功
    在这里插入图片描述
    ------------------------------------------------------------------------------------------------------

    以下内容节选自尚硅谷的笔记

    3、编译选项

    • 自动编译文件

      • 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

      • 示例：

        • tsc xxx.ts -w

          • 1

    • 自动编译整个项目

      • 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。

      • 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json

      • tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译

      • 配置选项：

        • include

          • 定义希望被编译文件所在的目录

          • 默认值：[“**/*”]

          • 示例：

            • "include":["src/**/*", "tests/**/*"]

              • 1

            • 上述示例中，所有src目录和tests目录下的文件都会被编译

        • exclude

          • 定义需要排除在外的目录

          • 默认值：[“node_modules”, “bower_components”, “jspm_packages”]

          • 示例：

            • "exclude": ["./src/hello/**/*"]

              • 1

            • 上述示例中，src下hello目录下的文件都不会被编译

        • extends

          • 定义被继承的配置文件

          • 示例：

            • "extends": "./configs/base"

              • 1

            • 上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息

        • files

          • 指定被编译文件的列表，只有需要编译的文件少时才会用到

          • 示例：

            • "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]

              • 1
              • 2
              • 3
              • 4
              • 5
              • 6
              • 7
              • 8
              • 9
              • 10
              • 11

            • 列表中的文件都会被TS编译器所编译

          • compilerOptions

            • 编译选项是配置文件中非常重要也比较复杂的配置选项

            • 在compilerOptions中包含多个子选项，用来完成对编译的配置

              • 项目选项

                • target

                  • 设置ts代码编译的目标版本

                  • 可选值：

                    • ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

                  • 示例：

                    • "compilerOptions": {
    "target": "ES6"
}

                      • 1
                      • 2
                      • 3

                    • 如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码

                • lib

                  • 指定代码运行时所包含的库（宿主环境）

                  • 可选值：

                    • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …

                  • 示例：

                    • "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "outDir": "dist",
    "outFile": "dist/aa.js"
}

                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6

                • module

                  • 设置编译后代码使用的模块化系统

                  • 可选值：

                    • CommonJS、UMD、AMD、System、ES2020、ESNext、None

                  • 示例：

                    • "compilerOptions": {
    "module": "CommonJS"
}

                      • 1
                      • 2
                      • 3

                • outDir

                  • 编译后文件的所在目录

                  • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置

                  • 示例：

                    • "compilerOptions": {
    "outDir": "dist"
}

                      • 1
                      • 2
                      • 3

                    • 设置后编译后的js文件将会生成到dist目录

                • outFile

                  • 将所有的文件编译为一个js文件

                  • 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中

                  • 示例：

                    • "compilerOptions": {
    "outFile": "dist/app.js"
}

                      • 1
                      • 2
                      • 3

                • rootDir

                  • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录

                  • 示例：

                    • "compilerOptions": {
    "rootDir": "./src"
}

                      • 1
                      • 2
                      • 3

                • allowJs

                  • 是否对js文件编译

                • checkJs

                  • 是否对js文件进行检查

                  • 示例：

                    • "compilerOptions": {
    "allowJs": true,
    "checkJs": true
}

                      • 1
                      • 2
                      • 3
                      • 4

                • removeComments

                  • 是否删除注释
                  • 默认值：false

                • noEmit

                  • 不对代码进行编译
                  • 默认值：false

                • sourceMap

                  • 是否生成sourceMap
                  • 默认值：false

              • 严格检查

                • strict
                  • 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
                • alwaysStrict
                  • 总是以严格模式对代码进行编译
                • noImplicitAny
                  • 禁止隐式的any类型
                • noImplicitThis
                  • 禁止类型不明确的this
                • strictBindCallApply
                  • 严格检查bind、call和apply的参数列表
                • strictFunctionTypes
                  • 严格检查函数的类型
                • strictNullChecks
                  • 严格的空值检查
                • strictPropertyInitialization
                  • 严格检查属性是否初始化

              • 额外检查

                • noFallthroughCasesInSwitch
                  • 检查switch语句包含正确的break
                • noImplicitReturns
                  • 检查函数没有隐式的返回值
                • noUnusedLocals
                  • 检查未使用的局部变量
                • noUnusedParameters
                  • 检查未使用的参数

              • 高级

                • allowUnreachableCode
                  • 检查不可达代码
                  • 可选值：
                    • true，忽略不可达代码
                    • false，不可达代码将引起错误
                • noEmitOnError
                  • 有错误的情况下不进行编译
                  • 默认值：false

    4、webpack

    • 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

    • 步骤：

      1. 初始化项目

        • 进入项目根目录，执行命令 npm init -y
          • 主要作用：创建package.json文件

      2. 下载构建工具

        • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
          • 共安装了7个包
            • webpack
              • 构建工具webpack
            • webpack-cli
              • webpack的命令行工具
            • webpack-dev-server
              • webpack的开发服务器
            • typescript
              • ts编译器
            • ts-loader
              • ts加载器，用于在webpack中编译ts文件
            • html-webpack-plugin
              • webpack中html插件，用来自动创建html文件
            • clean-webpack-plugin
              • webpack中的清除插件，每次构建都会先清除目录

      3. 根目录下创建webpack的配置文件webpack.config.js

        • const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },

    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {
                   loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'TS测试'
        }),
    ]

}

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46
          • 47
          • 48
          • 49

      4. 根目录下创建tsconfig.json，配置可以根据自己需要

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

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

      5. 修改package.json添加如下配置

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

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

      6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

    5、Babel

    • 经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

      1. 安装依赖包：

        • npm i -D @babel/core @babel/preset-env babel-loader core-js
        • 共安装了4个包，分别是：
          • @babel/core
            • babel的核心工具
          • @babel/preset-env
            • babel的预定义环境
          • @babel-loader
            • babel在webpack中的加载器
          • core-js
            • core-js用来使老版本的浏览器支持新版ES语法

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

        • ...略...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34

        • 如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。

  • 相关阅读:
    SpringCloud实战项目(1)---创建空项目 jdk17
    解密Python中的*args和**kwargs函数
    什么是高防服务器?如何正确的选择高防服务器
    K8S：pod控制器详解
    Ubuntu服务器中java -jar 后台运行Spring Boot项目
    真实记录阿里云实践成本优化，成本直接降低一半
    谈谈mysql中的各个关键字
    阿里妈妈API接口 按关键字或网址搜索商品
    Redis发布订阅和数据类型
    R语言入门笔记2.5
  • 原文地址：https://blog.csdn.net/YUELEI118/article/details/134539349