tsconfig.json常用配置详解
{
// include 用来指定哪些ts文件需要被编译
// ** 表示任意文件夹
// * 表示任意文件
// "./src/**/*" 表示src下的任意文件夹下的任意文件
"include": [
"./src/**/*"
],
"exclude": [
"./src/hello/**/*"
],
"compilerOptions": {
// target 用来指定ts被编译为js的版本,默认为es3
"target": "es2015",
// module 指定要使用的模块化的规范
// 可选值:none/commonjs/es6/es2015/es2020/system...
"module": "es2015",
// lib 指定要用的一些库,一般不用配置
// "lib": ["dom", "ES6"],
// outDir 用来指定编译后的js要存放在哪个文件夹下
"outDir": "./dist",
// 配置outFile后,所有的全局作用域中的代码会合并到同一个文件中,一般不用配置
// "outFile": "./dist/app.js",
// 是否对js文件进行编译,默认是false
"allowJs": false,
// 是否检查js代码是否符合ts规范,默认是false,一般和allowJs一起配置
"checkJs": false,
// 是否移除注释,默认值为false
"removeComments": false,
//不生成编译后的js文件,默认值false(生成文件),一般不配置
// "noEmit": true,
// 所有严格检查的总开关,一般设为true,都打开;需要关闭的再另外一一设置
"strict": true,
// 当有错误时不生成编译后的js文件,默认是false(ts有错误,也能编译生成js文件)
"noEmitOnError": true,
// 用来设置编译后的js文件是否使用严格模式,默认是false(不使用严格模式)
"alwaysStrict": false,
//不允许出现隐式的any类型
"noImplicitAny": true,
// 不允许不明确类型的this
"noImplicitThis": true,
// 严格的检查空值
"strictNullChecks": true
}
}
ts结合webpack
1、npm init :创建package.json
2、npm i -D webpack-dev-server:相当于在项目中安装了一个webpack的内置服务器,可以让我们的项目在它上面运行。默认地址:localhost:8080
3、在package.json中配置:
"scripts": {
"start": "webpack serve --open chrome.exe" //启动webpack服务器时,默认用chrome浏览器打开
},
4、webpack.config.js
const path = require('path')
// npm i -D html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin') //在dist下自动生成新的index.html,并且在index.html中引入相关资源
// npm i -D clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //该插件用于,在每次编译前,先将旧的dist文件删除,然后创建新的dist文件
module.exports = {
//配置模式,必配项,可参考https://webpack.js.org/concepts/#mode
mode: 'development',
// 打包入口文件
entry: "./src/main.ts",
output: {
//__dirname表示webpack.config.js所在目录,即 webpack_demo1; 将'dist'拼接到webpack_demo1后面,即webpack_demo1/dist
path: path.resolve(__dirname,'dist'),
// 打包出口文件为:webpack_demo1/dist/bundle.js
filename: 'bundle.js',
environment: {
//告诉webpack,编译后的js文件中不使用箭头函数
arrowFunction: false,
//告诉webpack,编译后的js文件中不使用const,兼容ie10
const: false
},
// publicPath: '/', //默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
},
//指定webpack打包时要使用模块
module: {
//指定要加载的规则
rules: [
{
test: /\.ts$/,
use: [
// npm i -D @babel/core @babel/preset-env babel-loader core-js
//配置babel,将es6的新语法转为旧语法;老版本中不能用的新语法,通过babel,使老版本也能用
{
//指定加载器
loader: "babel-loader",
//设置babel
options: {
//设置预定义的环境
presets: [
[
//指定环境的插件
"@babel/preset-env",
//配置信息
{
//要兼容的目标浏览器
targets: {
"chrome": "87"
},
//指定corejs的版本
"corejs": "3",
//表示按需加载corejs
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
//npm i -D less less-loader css-loader style-loader
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
//引入postcss,有点类似也babel,让老版本浏览器也能支持新样式
//npm i -D postcss postcss-loader postcss-preset-env
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
browsers: 'last 2 versions' //兼容每个浏览器最新的两个版本
}
]
]
}
}
},
"less-loader"
]
},
]
},
//用来设置引用模块
resolve: {
extensions: ['.js', '.ts'], //配置导入文件时,可省略的扩展名
},
plugins: [
new CleanWebpackPlugin(),//在每次编译前,先将旧的dist文件删除,然后创建新的dist文件
//在dist下自动生成新的index.html,并且在index.html中引入相关资源
new HtmlWebpackPlugin({
// 注意:index.html 必须和 webpack.config.js 在同一目录下
template: 'index.html' //以index.html为模板,在打包时,在dist文件夹下生成index.html
}),
],
}
简洁版tsconfig.json
{
"compilerOptions": {
// target 用来指定ts被编译为js的版本,默认为es3
"target": "es2015",
// module 指定要使用的模块化的规范
// 可选值:none/commonjs/es6/es2015/es2020/system...
"module": "es2015",
// 当有错误时不生成编译后的js文件,默认是false(ts有错误,也能编译生成js文件)
"noEmitOnError": true,
// 所有严格检查的总开关,一般设为true,都打开;需要关闭的再另外一一设置
"strict": true,
}
}