// 热更新的ts文件
·
单个文件的热更新： tsc 文件名.ts -watch | -w
多个文件的热更新： 在根目录下创建一个tsconfig.json 的文件, tsc -w 后即可热更新
// tsconfig.json的配置选项
include: 指定编译的文件
** ： 表示任意路径
* ： 表示任意文件
"include": [ "./src/**/*" ] // => 根目录下的src文件中的任意路径(**)的任意文件(*)
exclude: 不需要编译的文件
"exclude": ["node_modules", "bower_components", "jspm_packages"] // 默认值
extends: 定义被继承的配置文件
"extends": "./configs/base" // => 是指引入在configs中的base.json的文件
files: 指定被编译文件的列表，*只有需要编译的文件少时才会用
// **compilerOptions: ** 编译器的选项
**target: ** 用于指定TS被解析的ES的版本
"target": "es2015" // 可选项 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"
module: 指定es的模块化方案
"module": "es2015" // 可选项： "none", "commonjs", "amd", "system", "umd", "es6", "es2015", "es2020", "esnext"
lib: 依赖的库，一般不需要修改
"lib": [] /* 'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017'
'es2018' 'es2019' 'es2020' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asyncgenerator' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.bigint' 'es2020.promise' 'es2020.string' 'es2020.symbol.wellknown' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 'esnext.string' 'esnext.promise' */
outDir: 用于存放编译后的文件所在目录
"outDir": "./dist"
outFile: 设置outFile后 会吧所有的文件合并到同一个文件中并且 只有符合"amd"，和"system" 模块化的文件才能合并到同一个文件
"outFile": "./dist/app"
allowJs: true // 是否编译JS
checkJs: true // 是否校验符合Ts语法的JS
* 一般都是同时 使用 均为布尔值
removeComments: true // 是否编译注释
noEmit: false // 不生成编译后的文件
noEmitOnError： true // 不编译错误的文件
alwaysStrict: true // 用于编译后的js文件是否使用严格模式(模块代码自带严格模式)
noImplicitAny: true // 不允许变量没有数据类型（即：不声明变量的数据类型，默认为：any）
noImplicitThis: true // 不允许不明确类型的this（即：需要标注this的来源或者类型）
function fn(this: window) {
console.log(this)
}
strictNullChecks: true // 严格检测空值
strict: true // 所有严格选项的总开关
// webpack打包TS
初始化项目: npm init -y 创建package.json文件
安装依赖: npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin
* -D : 开发版；
* webpack-cli: webpack命令行
* ts-loader: webpack的整合器，使ts编译与之一体
* html-webpack-plugin：webpack中html插件，用来自动创建html文件
* webpack-dev-server: webpack开发服务
* clean-webpack-plugin：webpack中的清除插件，每次build都会先清除目录
配置webpack: 根目录下创建webpack的配置文件webpack.config.js
- environment // 打包配置后 （打包后不使用箭头函数）
// 引入包
const path = require("path")
// 引入 webpack 的 html 插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
// 引入build时删除的dist的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack的锁头配置文件都要写在 module.exports 中
module.exports = {
// 指定入口文件
entry: "./src/index.ts" ,
// 指定到打包后的文件目录
output: {
path: path.resolve(__dirname, 'dist'),
// 打包后的文件的文件
filename: "bundle.js",
// 打包配置后 （打包后不使用箭头函数）
environment: {
arrowFunction: true // 兼容IE11一下
}
},
// 指定webpack打包时使用的模块
module: {
// 指定打包后的规则
rules: [
{
// test 指定生效的文件
test: /\.ts$/,
// 使用 ts-loader 编译所有的 .ts的文件
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
options: {
// 设置预定义的运行环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的浏览器版本
targets: {
"chrome": "58",
"ie": "11"
},
// 指定corejs的版本
"corejs": "3",
// 使用corejs的方式： usage=>按需加载
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
// 创建html插件实例
new HTMLWebpackPlugin({
// 网页模板
template: "./src/index.html"
}),
],
// 设置可引用的模块
resolve: {
extensions: ['.ts', '.js']
}
}
配置TS编译选项: 根目录下创建tsconfig.json，(配置可以根据自己需要)
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
修改package.json配置: 添加build与start
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...
}
项目启用: 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译；或者执行npm start来启动开发服务器；
// babel包
作用：用于兼容各个版本的浏览器
安装： npm i @babel/core @babel/preset-env babel-loader core-js
* @babel/core: babel主要库
* @babel/preset-env： babel预置环境 （适应不同浏览器）
* babel-loader: 合并包
* core-js: js运行环境 （模拟不同的版本浏览器）
- babel配置在上方
webpack.config.js中
