TypeScript 学习笔记 第二部分 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
  • 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$/,// 要使用的loaderuse: [// 将新版本的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.mzph.cn/news/161669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCIE链路训练-状态机描述1

状态机描述 Config.linkwidth.start: 1. (1)Linkup 0 状态机没有执行链路宽度的升级(upconfiguration of the Link width):那么tx会在所有active的dsp上发送TS1,其中link num为具体内容&a…

git stash 用法总结

目录 1,介绍场景1:场景2: 2,常用命令2.1,基础2.2,进阶1,存储时指定备注2,通过索引来操作指定的存储3,修改存储规则 2.3,查看 stash 修改的具体内容 1&#xf…

Element UI之Dialog 对话框

Dialog 对话框 用于弹出窗口 按需引入方式 如果是完整引入可跳过此步骤 import Vue from vue import { Dialog } from element-ui import element-ui/lib/theme-chalk/base.css import element-ui/lib/theme-chalk/dialog.cssVue.use(Dialog)基础使用 <template><…

摩尔定律,梅特卡夫定律,吉尔德定律

信息系统的三大定律(摩尔定律&#xff0c;梅特卡夫定律&#xff0c;吉尔德定律)有一个清晰的视角&#xff1a; 信息系统不是左边的生产消费系统&#xff0c;而是右边的交易系统&#xff0c;交易系统与生产消费典型的区别在于信息交易过程会产生新的信息&#xff0c;就像钱一样…

c语言——俄罗斯方块

一、游戏效果 俄罗斯方块 二. 游戏背景 俄罗斯方块是久负盛名的游戏&#xff0c;它也和贪吃蛇&#xff0c;扫雷等游戏位列经典游戏的⾏列。 《俄罗斯方块》&#xff08;Tetris&#xff0c;俄文&#xff1a;Тетрис&#xff09;是一款由俄罗斯人阿列克谢帕基特诺夫于1984…

java http

超文本传输协议 超文本/html 工作方式 get / url 请求获取相应报文 http://xxxxxxxxxxxx.com/user?xxx xxx 协议类型 - 服务器地址 -路径 path 请求格式: head / body path路径进行处理资源 等同于报文请求: GET: /users HTTP/1.1 Host:api.github.com 响应报文 请求方式…

京东数据分析平台(京东运营数据采集):2023年10月京东白酒品牌销售排行榜

鲸参谋监测的京东平台10月份白酒市场销售数据已出炉&#xff01; 鲸参谋数据显示&#xff0c;10月份&#xff0c;京东平台上白酒的销量为340万&#xff0c;环比增长约16%&#xff0c;同比增长约37%&#xff1b;销售额为28亿&#xff0c;环比增长约20%&#xff0c;同比增长约122…

educoder中Hive综合应用案例 — 学生成绩查询

第1关:计算每个班的语文总成绩和数学总成绩 ---------- 禁止修改 ----------drop database if exists mydb cascade;set hive.auto.convert.join = false; set hive.ignore.mapjoin.hint=false; ---------- 禁止修改 ---------- ---------- begin ---------- ---创建mydb数据…

如何在Ubuntu的Linux系统中安装MySQL5.7数据库

前往MySQL数据库官网链接地址下载5.7数据库。 MySQL :: Download MySQL Community Server (Archived Versions)使用ssh的可视化工具将下载的mysql-5.7.40-linux-glibc2.12-x86_64.tar.gz文件上传到Linux服务器&#xff0c;并解压文件 tar -zxvf mysql-5.7.40-linux-glibc2.12-x…

总结vue框架中的钩子函数

vue2.x生命周期钩子函数 组件的生命周期分为3个阶段: 挂载阶段:beforeCreate、created、beforeMount、mounted,更新阶段:beforeUpdate、updated,销毁阶段:beforeDestroy、destroyed beforeCreate beforeCreate() {// 初始化数据&#xff0c;并通过Object.defineProperty()和…

基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码

基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蛇优化优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络…

大数据预处理技术

文章目录 前言 大数据技术成为前沿专业 也是现在甚至未来的朝阳产业&#xff0c;大数据有分别是 数据预处理 数据存储 大数据处理和分析 数据可视化 部分组成 &#xff0c;大数据行业有数据则称王&#xff0c;大数据的核心是数据本身 怎么获取有价值的数据呢&#xff1f;本章讲…

android 9 adb安装过程学习(二)

一、PackageInstalllerService流程分析 下面来分析下 PackageInstallerService 中的逻辑&#xff0c;我们先来看看 PackageInstallerService 的创建&#xff0c;当然&#xff0c;这部分的逻辑是在开机的时候&#xff0c;这里我们再回顾下&#xff1a; 位置&#xff1a;./frame…

Cent OS 8.2 安装 自定义硬盘 固定IP VMware

时间&#xff1a;20231122 环境&#xff1a;win11 、VMware 16 pro、Cent OS 8.2 说明&#xff1a;自定义安装方法、自定义硬盘分区、固定IP且能联网 1、使用自定义的方式安装虚拟机 此处选择典型&#xff0c;则会自动安装系统&#xff0c;无法自定义硬件以及配置信息 选择…

CCF CSP认证 历年题目自练Day49

题目一 此题用暴力枚举做过&#xff08;80分&#xff09;现如今终于用二维前缀和做到满分。 试题编号&#xff1a; 202309-2 试题名称&#xff1a; 坐标变换&#xff08;其二&#xff09; 时间限制&#xff1a; 2.0s 内存限制&#xff1a; 512.0MB 问题描述&#xff1a; 问题…

【Axure视频教程】中继器首行函数

今天教大家在Axure里如何使用中继器首行函数&#xff0c;本视频教程会先从中继器首行函数的基础讲起&#xff0c;然后通过计算合计数、统计选中数、两个中继器选项联动这3个案例更加深入的讲解这这个函数的应用。注&#xff1a;该教程主要讲解中继器首行函数的用法&#xff0c;…

NFC:应用场景广泛的短距离通信技术

NFC&#xff1a;应用场景广泛的短距离通信技术 一、NFC 技术介绍1.1 NFC 技术应用场景1.2 NFC 技术优点1.3 NFC 工作原理 二、NFC 开发2.1 NFC 应用开发流程2.2 NFC 读取和写入2.3 NFC 读写功能示例 三、总结 一、NFC 技术介绍 NFC &#xff08;Near-field communication&…

SM系列国密算法

一、概述 国产密码算法&#xff08;国密算法&#xff09;是指国家密码局认定的国产商用密码算法&#xff0c;国密算法是提升国家密码安全和数据安全的关键技术。 为了保障商用密码的安全性&#xff0c;国家密码局制定了一系列密码标准&#xff0c;包括&#xff1a;SM1、SM2、S…

分类预测 | Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据分类预测

分类预测 | Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据分类预测 目录 分类预测 | Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据…

hadoop在本地创建文件,然后将文件拷贝/上传到HDFS

1.要$cd {对应目录}进入到对应目录&#xff0c;一般为 cd /usr/local/hadoop/ 2.创建文件&#xff0c;$sudo gedit {文件名}&#xff0c;例 sudo gedit test.txt 然后在弹出的txt文件输入内容&#xff0c;点击右上角的保存之后&#xff0c;关闭即可。 3.拷贝本地文件到HDF…