ts配置文件的配置项有很多下面是一些常见的配置：
{
//这个ts的json可以写注释,用来指令哪些ts文件需要编译,/*任意文件,/**任意目录,./是当前目录 ,
// ../是父级目录,/是根目录（表示一下子回到最顶端的那个文件夹下）
"include": [
"../ts_01/**/*"
],
//排除编译文件
"exclude": [
],
"compilerOptions": {
//所有严格检查的总开关,默认为false
"strict": true,
//使用什么版本的es
"target": "ES6",
//指定使用模块化的规范
"module": "ES6",
//导入别的库，一般默认就行，除非是浏览器环境
// "lib": \[\],
//指定编译后js文件的目录
"outDir": "./dist",
//合成一个文件
// "outFile": "",
//是否对js文件进行编译，默认为false
"allowJs": true,
// 是否检查js代码符合语法规范，默认为false
"checkJs": false,
//是否移除注释,默认为false
"removeComments": false,
//不生成编译后的文件默认为false
"noEmit": false,
//有错误时候就不生成编译后的文件,默认为false
"noEmitOnError": false,
//设置代码严格模式,默认为false
"alwaysStrict": false,
//不允许隐式any,默认为false
"noImplicitAny": false,
//不允许不明确类型的this,默认this
"noImplicitThis": false,
//严格检查空值默认false
"strictNullChecks": false,
},
}
ts打包配置文件
npm init -y
需要下载的插件
npm i -D webpack-cli webpack typescript ts-loader
需要配置的文件
package-lockjson是自动生成的依赖
package.json
{
"name": "ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open --mode development"
},
"keywords": \[\],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"babel-loader": "^9.1.3",
"core-js": "^3.38.0",
"html-webpack-plugin": "^5.6.0",
"ts-loader": "^9.5.1",
"typescript": "^5.5.4",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
}
}
tsconfig,json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
"typeRoots": "./node_modules/@types",
"types": "node" // 如果你的项目依赖于 Node.js 的类型定义，可以添加这个
}
}
webpack.config,js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path =require('path');
//引入插件
//webpack中所有的配置信息都应该写在module.exports中
module.exports = {
mode: 'development',
//入口文件
entry:"./src/index.ts",
//指定打包文件所在目录
output:{
//指定打包文件夹的目录
path:path.resolve(__dirname,'dist'),
filename:"bundle.js",
//告诉webpack不使用箭头函数
// environment:{
// arrowFunction:false
// }
},
//指定webpack打包时要使用模块
module:{
rules:[
{
//test指定的是对谁生效
test:/\.ts$/,
// 要使用的loader
use:[
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env', { targets: { chrome: "88" }, corejs: "3.0", useBuiltIns: "usage" }
]
}
},
'ts-loader',
],
//要排除的文件
exclude:/node-modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
// title:"自定义title"
template:"./src/index.html"
}),
],
resolve:{
extensions: '.ts','.js'
}
}
前端配置文件很多，大致了解意思即可，需要用的时候直接用配置好的模版就行