webpack 创建typescript项目

news2024/11/15 8:27:08

【视频链接】尚硅谷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
  • webpack中html插件，用来自动创建html文件
npm i -D html-webpack-plugin
  • webpack-dev-server ：自动编译ts文件
npm i -D webpack-dev-server
  • clean-webpack-plugin：webpack中的清除插件，每次构建都会自动清除上次编译后的文件
 npm i -D clean-webpack-plugin
  • 提高代码的兼容性，让代码可以在一些旧的浏览器中顺利运行
npm i -D @babel/core @babel/preset-env babel-loader core-js

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']
    }
}
  • 创建ts的配置文件tsconfig.js
{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES6",
    "strict": true
  },
}
  • 在package.json文件中加入
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },

3. 手动编译，运行

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

在这里插入图片描述

4. 自动编译和运行

npm start

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

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

3、编译选项

  • 自动编译文件

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

    • 示例：

      • tsc xxx.ts -w

  • 自动编译整个项目

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

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

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

    • 配置选项：

      • include

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

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

        • 示例：

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

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

      • exclude

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

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

        • 示例：

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

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

      • extends

        • 定义被继承的配置文件

        • 示例：

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

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

      • files

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

        • 示例：

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

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

        • compilerOptions

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

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

            • 项目选项

              • target

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

                • 可选值：

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

                • 示例：

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

                  • 如上设置，我们所编写的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"
}

              • module

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

                • 可选值：

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

                • 示例：

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

              • outDir

                • 编译后文件的所在目录

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

                • 示例：

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

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

              • outFile

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

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

                • 示例：

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

              • rootDir

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

                • 示例：

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

              • allowJs

                • 是否对js文件编译

              • checkJs

                • 是否对js文件进行检查

                • 示例：

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

              • 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测试'
        }),
    ]

}

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

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

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

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

    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/
        }
    ]
}
...略...

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1237377.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

处理无线debug问题

处理无线debug问题

无限debug的产生 条件说明 开发者工具是打开状态 js代码中有debugger js有定时处理 setInterval(() > {(function (a) {return (function (a) {return (Function(Function(arguments[0]" a ")()))})(a)})(bugger)(de, 0, 0, (0, 0)); }, 1000); ​ #这里就…
阅读更多...
【论文阅读】An Experimental Survey of Missing Data Imputation Algorithms

【论文阅读】An Experimental Survey of Missing Data Imputation Algorithms

论文地址：An Experimental Survey of Missing Data Imputation Algorithms | IEEE Journals & Magazine | IEEE Xplore 处理缺失数据最简单的方法就是是丢弃缺失值的样本，但这会使得数据更加不完整并且导致偏差或影响结果的代表性。因此，…
阅读更多...
wpf使用CefSharp.OffScreen模拟网页登录，并获取身份cookie

wpf使用CefSharp.OffScreen模拟网页登录，并获取身份cookie

目录 框架信息&#xff1a;MainWindow.xamlMainWindow.xaml.cs爬取逻辑模拟登录拦截请求Cookie获取 CookieVisitorHandle 框架信息&#xff1a; CefSharp.OffScreen.NETCore 119.1.20 MainWindow.xaml <Window x:Class"Wpf_CHZC_Img_Identy_ApiDataGet.MainWindow&qu…
阅读更多...
虚函数可不可以重载为内联 —— 在开启最大优化时gcc、clang和msvc的表现

虚函数可不可以重载为内联 —— 在开启最大优化时gcc、clang和msvc的表现

下面是对该问题的一种常见回答&#xff1a; 首先&#xff0c;内联是程序员对编译器的一种建议&#xff0c;因此可以在在重载虚函数时在声明处加上inline关键字来修饰&#xff0c; 但是因为虚函数在运行时通过虚函数表&#xff0c;而内联函数在编译时进行代码嵌入&#xff0c;因…
阅读更多...
【Spring】之IoC与对象存取

【Spring】之IoC与对象存取

未来的几周时间&#xff0c;大概率我会更新一下Spring家族的一些简单知识。而什么是Spring家族&#xff0c;好多同学还不是很清楚&#xff0c;我先来简单介绍一下吧&#xff1a; 所谓Spring家族&#xff0c;它其实就是一个框架&#xff0c;是基于Servlet再次进行封装的内容。为…
阅读更多...
SpringBoot启动后自动打开浏览器访问项目

SpringBoot启动后自动打开浏览器访问项目

更简单的一个方法 Runtime.getRuntime().exec("rundll32 url.dll,FileProtocolHandler " url); Springboot项目启动后自动打开浏览器访问(超实用)_浏览器访问springboot项目-CSDN博客 Springboot项目启动后自动打开浏览器访问 1、在Springboot项目中每次启动完项…
阅读更多...
DeepWalk: Online Learning of Social Representations（2014 ACM SIGKDD）

DeepWalk: Online Learning of Social Representations（2014 ACM SIGKDD）

DeepWalk: Online Learning of Social Representations----《DeepWalk&#xff1a;用于图节点嵌入的在线机器学习算法》 DeepWalk 是将 word2vector 用到 GNN 上 DeepWalk&#xff1a; 将 Graph 的每个节点编码为一个 D 维向量&#xff08;无监督学习&#xff09;&#xff0c;E…
阅读更多...
云HIS系统源码，医院管理系信息统源码，融合B/S版四级电子病历系统

云HIS系统源码，医院管理系信息统源码，融合B/S版四级电子病历系统

医院管理信息系统是以推进公共卫生、医疗、医保、药品、财务监管信息化建设为着力点&#xff0c;整合资源&#xff0c;加强信息标准化和公共服务信息平台建设&#xff0c;逐步实现统一高效、互联互通的管理系统。 SaaS模式Java版云HIS系统&#xff0c;在公立二甲医院应用三年…
阅读更多...
企业该怎么选择IP证书

企业该怎么选择IP证书

IP证书是一种数字证书&#xff0c;它由权威的数字证书颁发机构&#xff08;CA&#xff09;颁发&#xff0c;部署在只有公网IP地址的站点上&#xff0c;用于在网络中验证身份和保护信息安全。IP证书可以在各种场景下保护网站的信息安全&#xff0c;比如网站vip登录&#xff0c;线…
阅读更多...
赛氪荣幸受邀参与中国联合国采购促进会第五次会员代表大会

赛氪荣幸受邀参与中国联合国采购促进会第五次会员代表大会

11 月21 日 &#xff08;星期二&#xff09; 下午14:00&#xff0c;在北京市朝阳区定福庄东街1号中国传媒大学&#xff0c;赛氪荣幸参与中国联合国采购促进会第五次会员代表大会。 2022年以来&#xff0c;联合国采购杯全国大学生英语大赛已经走上了国际舞台&#xff0c;共有来自…
阅读更多...
Windows安装Linux双系统教程

Windows安装Linux双系统教程

&#x1f4bb;Windows安装Linux双系统教程 &#x1f959;资源准备&#x1f354;启动盘制作&#x1f373;分区&#x1f32d;重启电脑&#x1f371;安装Ubuntu &#x1f959;资源准备 &#x1f4a1;下载ubuntu系统、refus启动盘制作程序&#x1f448; &#x1f4a1;一个U盘 &am…
阅读更多...
【数据分享】全国1-5级流域、河流矢量数据与水体分布、五级水系数据、八级水系边界范围矢量数据

【数据分享】全国1-5级流域、河流矢量数据与水体分布、五级水系数据、八级水系边界范围矢量数据

全国3级流域及各级河流数据:今天给大家分享的数据主要为五个&#xff0c;分别为3级流域、1级河流数据、3级以上河流数据以及4级和5级的河流数据。其中1级河流和3级以上河流数据中存在线状矢量以及面状的湖泊数据&#xff1b;4级和5级的河流数据仅为线状的河流矢量数据。数据中大…
阅读更多...
单链表相关面试题--5.合并有序链表

单链表相关面试题--5.合并有序链表

5.合并有序链表 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; /* 解题思路&#xff1a; 此题可以先创建一个空链表&#xff0c;然后依次从两个有序链表中选取最小的进行尾插操作进行合并。 */ typedef struct ListNode Node; struct ListNode* mergeTwoList…
阅读更多...
Docker上部署mysql（超简单！！！）

Docker上部署mysql（超简单！！！）

拉取mysql镜像 运行如下命令 docker pull mysql:5.7 拉取成功 查看镜像 运行容器 此处部署最新版本的mysql docker run -d --name mysql -p 3307:3306 -e TZAsia/Shanghai -e MYSQL_ROOT_PASSWORD111 mysql --name mysql&#xff1a;给容器起个名字&#xff08;唯一&#xff…
阅读更多...
振南技术干货集：制冷设备大型IoT监测项目研发纪实（3）

振南技术干货集：制冷设备大型IoT监测项目研发纪实（3）

注解目录 1.制冷设备的监测迫在眉睫 1.1 冷食的利润贡献 1.2 冷设监测系统的困难 &#xff08;制冷设备对于便利店为何如何重要&#xff1f;了解一下你所不知道的便利店和新零售行业。关 于电力线载波通信的论战。&#xff09; 2、电路设计 2.1 防护电路 2.1.1 强电防护…
阅读更多...
大模型创业“风投”正劲，AGI Foundathon 大模型创业松活动精彩看点

大模型创业“风投”正劲，AGI Foundathon 大模型创业松活动精彩看点

这是一场万众瞩目的大模型领域盛会。当来自世界各地的顶尖大模型开发者、创业者、投资人汇聚一堂&#xff0c;他们对大模型应用层的思考碰撞出了哪些火花&#xff1f;应运而生了哪些令人眼前一亮的AI-Native产品&#xff1f; 让我们一起来回顾吧&#xff5e;
阅读更多...
南京数字孪生赋能工业制造，加速推进制造业数字化转型

南京数字孪生赋能工业制造，加速推进制造业数字化转型

随着南京信息技术的迅猛发展和工业管理的不断演进&#xff0c;传统的工业管理方式已经无法满足企业对高效、智能和可持续发展的需求。针对这一情况&#xff0c;数字孪生技术应运而生&#xff0c;为南京工业管理带来了全新的变革和机遇。以数字孪生为理念&#xff0c;三维可视化…
阅读更多...
CPSC发布关于亚马逊含有纽扣电池或硬币电池产品的相关规则标准！UL4200A

CPSC发布关于亚马逊含有纽扣电池或硬币电池产品的相关规则标准！UL4200A

2023年9月21日&#xff0c;美国消费品安全委员会&#xff08;CPSC&#xff09;在《联邦公报》上发布了纽扣及硬币电池及相关产品的最终规则&#xff08;DFR&#xff09;16 CFR 1263&#xff0c;以保护6岁以下儿童免受电池摄入危害。DFR将于2023年10月23日生效&#xff0c;除非消…
阅读更多...
redis的集群

redis的集群

高可用方案 1、持久化 2、高可用 主从复制 哨兵模式 集群 主从复制: 主从复制是redis实现高可用的基础&#xff0c;哨兵模式和集群都是在主从复制的基础之上实现高可用 主从复制实现数据的多机备份&#xff0c;以及读写分离&#xff08;主服务器负责写&#xff0c;从服务器…
阅读更多...
排序算法:归并排序、快速排序、堆排序

排序算法:归并排序、快速排序、堆排序

归并排序 要将一个数组排序&#xff0c;可以先将它分成两半分别排序&#xff0c;然后再将结果合并&#xff08;归并&#xff09;起来。这里的分成的两半&#xff0c;每部分可以使用其他排序算法&#xff0c;也可以仍然使用归并排序&#xff08;递归&#xff09;。 我看《算法》…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023