编译
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译。
"include"用来指定那谢ts文件需要被编译。**任意目录
*任意文件
"include":[
• "./src/**/*" //编译src目录下的任意文件
]
”exclude“不需要被编译的文件夹
默认值["node_modules"...]
"exclude":[
• "./src/hello/**/*" //不需要编译src目录下hello目录下的任意文件
]
”compllerOptions“编译器的选项
"compllerOptions":[
//用来指定ts被编译为ES的版本
"target":"ES5",
//指定要使用的模块化的规范
"module":"es2015",
//用来指定项目中要使用的库
"lib":[],
//用来指定编译后文件所在的目录
"outDir":"",
//将代码合并为一个文件，所有的全局作用域中的代码合并到同一文件夹
"outFile":"",
//是否对js文件进行编译，默认是false
"alowJs":false,
//是否检查js代码是否符合语法规范，默认是false
"checkJs":true,
//是否移除注释
"removeComments":false,
//不生成编译后的文件，默认是false
"noEmit":false,
//当有错误时，不生成编译文件，默认是false
"noEmitOnError":true,
//严格检查的总开关
"strictNullChecks":true,
//设置编译后的文件严格模式，编译后的js文件中在文件开头部分添加一个“use strict”
"alwaysStrict":false,
//不允许隐式的any的类型，不提倡使用any类型，更不提倡使用隐式的any，将noImplicitAny改为true来对隐式的any类型进行检查
"noImplicitAny":false,
//不允许不明确的this
"noImplicitThis":false,
//严格的检查空值
"strictNullChecks":true,
]
"strictNullChecks":true,的例子：
box?.addEventListener('click',function(){`
alert(123)})
||
if(box!==null){
box.addEventListener('click',function(){`
alert(123)})
}
weback打包ts代码
1.npm init -y对项目初始化生成packagejson
2.cnpm i -D weback wepack-cli typescipt ts-loader安装的依赖
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中的清除插件，每次构建都会先清除目录
@babel/core @babel/preset-env babel-loader core.js 兼容浏览器
3.新建weback.config.js
//引入一个包
const path = require('path')
// 引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//webpack中的所有配置信息都应该写在module.exports中
module.exports={
// 指定入口文件（入口）
entry: "./src/index.ts",
// 指定打包文件所在目录（出口）
output: {
// 指定打包文件的目录，开头引入了path的一个包
path: path.resolve(__dirname, "dist"),
// 打包后文件的文件名
filename: "bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选 兼容ie
}
},
// 指定webpack打包时要使用的模块
module: {
//指定要加载的规则
rules: [
{
//指定规则生效的文件，表示去匹配说有以.ts结尾的文件
test: /.ts$/,
// 要使用的loader
use: [
//配置babel
{
//指定加载器
"loader":'babel-loader',
"options":{
//设置预定义的环境
presets:[
[
//指定环境插件
"@babel/preset-env",
//配置信息
{
//要兼容的浏览器
targets:{
"chrome":"88"
},
"corejs":'3',
//使用corejs的方式”usage“表示按需加载
"useBulitIns":"usage"
}
]
]
}
},
"ts-loader"
]
// 要排除的文件
exclude: /node_modules/
}
]
},
optimization:{
minimize: false // 关闭代码压缩，可选
},
devtool: "inline-source-map",
devServer: {
contentBase: './dist'
},
// 用来设置引入模块
resolve: {
extensions: [".ts", ".js"]
},
// 配置html-webpack插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
//title:'TS测试'
// 设置 title 模板
template: "./src/index.html"
}),
]
}
4.根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true,
"noEmitOnError":true,
}
}
5、修改package.json添加如下配置
{
...略...
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",//通过build命令直接执行webpack
// 启动webpack服务器并通过谷歌打开网页 安装npm i -D webpack-dev- serve
"start": "webpack serve --open chrome.exe"
},
...略...
}
