[TS基础]TS的编译选项,WebPack打包TS代码
[TS基础]TS的编译选项
·
TS的编译选项
一.基础配置选项
1.1 tsc [xxx.ts] -w的使用
- 编写完TS代码之后,需要执行
tsc xxx.ts
将TS代码编译转换为JS才能正确执行。这样每次修改每次都进行手动编译不是很方便,可以使用tsc xxx.ts -w
来监听文件是否有变化,一旦检测文件发生变化,就会实时的将TS转换成JS。
1.2 引入tsconfig.json文件
- 1.1中的方法在只有一个TS文件的时候还比较方便,但是文件一多起来,想要实时生成所有的JS文件也会变得麻烦,这个时候就可以通过
tsconfig.json
文件来配置TS的编译信息 - 可以在对应项目目录下直接新建文件,或者通过命令行
tsc --init
来创建该文件信息 - 有了
tsconfig.json
之后,通过tsc
就能编译项目下所有的TS文件,通过tsc -w
就能监视所有的TS文件并编译
1.3 基础配置选项
- 引入
tsconfig.json
之后,虽然可以“一键”编译,但是有时我们只希望编译其中一部分的ts代码,这时,就需要我们对tsconfig.json
文件进行一定的配置,以满足我们对编译项目的要求 include:
指定需要编译的文件或目录,*表示任意文件,**表示任意目录
exclude:
指定不需要编译的文件或目录extents:
可以复用之前已有的json文件,减少重复配置file:
用于指定单个的文件,范围较小不常用
{
/*
tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
*/
//inclode用来指定哪些ts文件需要被编译 可*表示任意文件 可**表示任意目录
"include": [
"./src/**/*" //表示当前的src目录下的任意目录的任意文件都被编译
],
//配置不希望被编译的文件,一般不用进行配置
//有默认值:["node_modules", "bower_components", "jspm_packages"]
"exclude": [
"./src/test_file/**/*"
],
//定义需要继承的配置文件,避免重复配置
//"extends": "",
//直接指定需要编译的文件,不常用,项目比较小的时候适用
"files": [
"./src/test_file/test_case.ts"
]
}
1.3.1.compilerOptions编译器选项
- target:用来指定编译TS文件时使用的ES版本,默认为兼容性较好的ES3
- module:指定编译时需要使用的模块化规范
- lib:用来指定编译时需要使用的库文件,一般不用动
- outDir:用于指定编译结束后的文件输出位置
- outFile:将不同代码合并为一个文件(对上述module取值有要求)
- allowJs:是否对JS文件进行编译,默认false
- checkJs:是否检查JS文件是否符合语法规范
- removeComments:是否移除注释
- noEmit:不生成编译后的文件
- noEmitOnError:当有语法错误时不生成编译后的文件
- alwaysStrict:编译后的文件是否启用严格模式
- noImplicitAny:是否禁止显示的Any类型
- noImplicitThis:是否允许类型不明的This
- strictNullChecks:严格检查语法中可能出现的null的值
- strict:所有严格模式的总开关,建议打开
"compilerOptions": {
// 用来指定TS文件编译时的ES版本,默认为ES3
// 可取值:es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext
"target": "ES5",
// 指定需要使用的模块化的规范
// 可取值:'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'
"module": "System",
// 用来指定项目中需要使用到的库文件, 随便赋值后可以查看具体值,一般情况下不需要动
//"lib": []
// 用于指定编译结束后的文件输出的位置
"outDir": "./dist",
// 用来将不同代码合并为一个文件,将编译输出的js文件合成一个文件
// 这个选项是对module文件有一定要求的
"outFile": "./dist/outJS.js",
// 是否对js文件进行编译,默认false
"allowJs": false,
// 是否检查js代码是否符合语法规范
"checkJs": false,
// 是否移除注释,默认false
"removeComments": false,
// 不生成编译后的文件,默认false
"noEmit": false,
// 当有错误时不生成编译后的文件
"noEmitOnError": false,
// 用来设置编译后的文件是否使用严格模式
"alwaysStrict": false,
// 是否禁止隐式的any类型
"noImplicitAny": false,
// 不允许类型不明确的this
"noImplicitThis": false,
// 严格的检查null的值,让编译器检测出有可能是null的值
"strictNullChecks": false,
// 所有严格检查的总开关,打开的话所有的严格检查都会打开
"strict": false
}
WebPack打包TS代码
1.初始化
- 使用
npm init -y
命令,在新项目的根目录下新建package.json文件 - 使用
npm i -D webpack webpack-cli typescript ts-loader
导入依赖工具包
2.完善配置信息
- 新建一个webpack.config.js配置文件,编写配置信息
// 导入一个包
const path = require('path');
// webpack 中的所有的配置信息都应该写在module.export中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在的目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件的名字
filename: "bundle.js"
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules:[
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: 'ts-loader',
// 要排除的文件
exclude: /node-modules/
}
]
}
};
- 新建一个tsconfig.json文件,添加配置信息
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
- 在之前生成的package.json文件中添加
"build":"webpack"
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 除了这个都是之前自动生成的
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.4.2",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
- 配置结束后便可以通过
npm run build
命令将项目进行打包了
3.html插件的引入
- 类似的使用
npm i -D html-webpack-plugin
命令可以引入插件,它可以帮助我们生成html文件 - 之后在webpack.config.json文件中配置html插件
...
// 引入html插件
const HTMLPlugin = require("html-webpack-plugin");
...
// webpack 中的所有的配置信息都应该写在module.export中
module.exports = {
// 配置Webpack的插件
plugins: [
new HTMLPlugin({
title: "MyWebPack", // 设定html网页的标题
template: "./src/index.html", // 设定生成的html网页的模板
}),
]
};
4.webpack-dev-server的引入
- 通过
npm i -D webpack-dev-server
引入本地服务器,根据项目的改变自动的刷新 - 配置package.json文件
{
...
"scripts": {
...
"start": "webpack serve --open edge.exe"
},
...
}
这时通过```npm start命令就可以实时的打开网页并修改我们的代码了
5.clean-webpack-plugin的引入
- 通过
npm i -D clean-webpack-plugin
命令引入该插件,可以帮助我们及时的清理生成的目录当中的旧文件,保持文件最新 - 在webpack.config.json文件中进行配置
...
// 引入clean插件
const CleanPlugin = require("clean-webpack-plugin");
...
// 配置Webpack的插件
plugins: [
...
new CleanPlugin(),
]
};
6.解除文件相互引用时的报错
- 当有多个ts文件之间存在相互引用的时候,webpack打包时就容易报错这时需要通过配置webpack.config.json文件来解决这个问题
module.exports = {
...
// 用来设置引用的模块的
resolve: {
extensions: ['.ts', '.js']
}
};
// 文件1: data.ts文件
export const myName = 'iFinder'
//文件2: index.ts文件
import { myName } from "./data"
// 这个时候没有webpack.config.json中的配置就会报错
console.log(myName)
7.badel的引入
- 同一套代码在不同的浏览器上执行可能会遇到兼容性问题,这个时候可以通过引入babel工具来解决这样的问题
- 通过
npm i -D @babel/core @babel/preset-env babel-loader core-js
来引入相应的模块 - 修改webpack.condig.json文件中的配置信息
...
module.exports = {
...
module: {
// 指定要加载的规则
rules:[
{
...
use: [
{ //配置babel
loader: "babel-loader",
options: {
// 设置预定义的环境
presets:[
[
// 指定环境插件
"@babel/preset-env",
{ // 配置信息
// 要兼容的目标浏览器
targets:{
"chrome":"88"
},
// 指定corejs的版本
"corejs":"3",
// 使用corejs的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
}
]
},
...
};
- webpack在打包的过程中会自动生成箭头表达式,需要禁用的话需要配置相应的属性
...
// webpack 中的所有的配置信息都应该写在module.export中
module.exports = {
...
// 指定打包文件所在的目录
output: {
...
environment: {
// 禁用箭头表达式
arrowFunction: false
}
},
...
};
笔记说明
更多推荐
已为社区贡献1条内容
所有评论(0)