了解了ts的基本语法，就想了解一下ts在webpack中是怎么配置的，基础到进阶，一天一个知识点，周周学习小妙招
编译选项
在上文中提到了对ts文件的自动监视和重新编译的命令 tsc xxx.ts -w,那么tsc是怎么执行这个命令的呢？
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json，直接使用tsc命令，可以自动将当前项目下的所有ts文件编译为js文件
配置选项
{
/*ts编译器的配置文件，ts编译器可根据他的信息来对代码进行编译*/
// include指定那些ts文件需要被编译
"include": [
// 只去编译src下的文件
"./src/**/*"
],
// 不包含，不希望编译的文件,一般不需要设置
"exclude": ["./src/hello/**/*"],
// 编译器的选项
"compilerOptions": {
//用来指定ts被编译的Es的版本
"target": "ES2015",
// 指定要使用的模块化的规范
/*“--module”选项的参数必须为 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node12', 'nodenext'。*/
"module": "system",
// lib用来指定项目中使用的库,一般不需要设置
"lib": ["DOM"],
// outDir指定编译后文件所在的目录
"outDir": "./dist",
// 将代码合并到一个文件->打包工具实现
"outFile": "./dist/app.js",
// 是否对js文件进行编译，默认是false
"allowJs": false,
// 检查js代码是否符合语法规范
"checkJs": false,
// 是否删除注释
"removeComments": false,
// 不生成编译后的文件->用的很少
"noEmit": false,
// 当前有错误时不生成编译后的文件
"noEmitOnError": false,
// 用来设置编译后的文件是否使用严格模式
"alwaysStrict": false,
// 不允许隐式any类型
"noImplicitAny": false,
// 不允许不明确类型的this
"noImplicitThis": false,
// 严格的检查空值
"strictNullChecks": false,
// 所有严格检查的总开关-->一般为true
"strict": false
}
}
webpack
实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用 步骤：
-
初始化项目
-
进入项目根目录，执行命令
npm init -y- 主要作用：创建package.json文件
-
-
下载构建工具
-
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin-
共安装了7个包
-
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中的清除插件，每次构建都会先清除目录
-
-
-
-
在根目录下创建webpack的配置文件webpack.config.js
// 引入一个包
const path = require('path')
// 引入html插件
const HTMlWebpackPlugin = require('html-webpack-plugin')
//引入clean插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// webpack 中的配置信息都在module.exports
module.exports = {
optimization:{
minimize: false // 关闭代码压缩，可选
},
// 指定入口文件
entry: './src/index.ts',
// 指定打包文件所在的目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件的名字
filename: 'bundle.js',
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选
}
},
//以这两个文件结尾的都可以解析模块
resolve: {
extensions: [".ts", ".js"]
},
// 指定webpack打包时使用的模块
module: {
// 指定loder规则
rules: [
{
// 指定的是规则生效的文件
// 匹配以ts结尾的文件
test: /\.ts$/,
// ts-loader处理以ts结尾的文件
use: 'ts-loader',
// 要排除的文件
exclude: /node-modules/
}
]
},
// 配置webpack插件
plugins: [
//删除dist文件并重新生成
new CleanWebpackPlugin(),
new HTMlWebpackPlugin({
// 自定义网页模板
template: './src/index.html'
})
]
}
- 根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
// 指定要使用的模块化的规范
"module": "ES2015",
//用来指定ts被编译的Es的版本
"target": "ES2015",
// "sourceMap": true
// 严格模式
"strict": true
}
}
- 修改package.json添加如下配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
- 在src下创建ts文件，并在并命令行执行
npm run build对代码进行编译，或者执行npm start来启动开发服务器
