一、TS编译选项
在根目录下创建 配置文件。
{
// include 用来指定哪些ts文件需要被编译
"include": [
"./one.ts"
],
// exclude 用来指定哪些ts文件不需要被编译
"exclude": [
"./src/**/*" // 路径中的 ** 表示任意目录;路径中的 * 表示任意文件
],
// extends 用来继承其他json文件的配置
"extends": "./tsconfig.base.json",
// files 用来指定需要被编译的文件，文件很少的时候才用files，文件多的时候采用include和exclude
"files": [
"./one.ts",
"./two.ts"
],
// 编译器选项 完整版：https://www.tslang.cn/docs/handbook/compiler-options.html
"compilerOptions": {
"target": "esnext", // 指定被编译成的ES版本，如 es3(默认)、es5、es6、es2015、es2016、es2017、es2018、es2019、es2020、esnext(最新版)等
"module": "esnext", // 指定模块化规范，如 none、system、umdamd、commonjs、es6、es2015、esnext等
"lib": ["esnext", "dom"], // 指定项目中要引入哪些库，不同版本的target具有不通的默认值。
"outDir": "./dist", // 指定编译后文件的存放的目录
"outFile": "./dist/app.js", // 将输出文件合并为一个文件；一些引入的其他模块的内容无法合并
"allowJs": true, // 是否允许编译.js文件，默认为false
"checkJs": true, // 是否检查.js代码中的语法规范(要符合ts规范)，默认为false，通常与allowJs一起使用
"removeComments": true, // 编译后的文件是否删除注释，默认为false
"noEmit": true, // 是否生成编译后的文件，默认为false
"noEmitOnError": false, // 当有错误时是否生成编译后的文件，默认为false
"alwaysStrict": true, // 编译后的文件是否使用严格模式，默认为false
"noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时是否报错，默认为false
"noImplicitThis": true, // 当 this表达式的值为 any类型的时候，是否生成一个错误，默认为false
"strictNullChecks": true, // 是否启用严格的空值检查(变量可能为null时报错)，默认为false
"strict": true, // 所有严格类型检查的总开关
"skipLibCheck": true, // 跳过库检查，解决打包失败
},
}
二、Webpack基本配置
1.使用npm包管理工具
- 执行
，生成
文件，使用npm 管理项目文件。
- 在package.json文件中，添加
属性，属性值为
，指定打包工具
为webpack。
/* pageage.json 文件 */
{
"name": "typescript",
"scripts": {
"build": "webpack"， // 指定打包方式
"start": "webpack serve --open chrome.exe", // 启动webpack内置服务器实现热更新
}
}
2.安装依赖
- webpack、webpack-cli
- typescript 、ts-loader：无需引入，直接在webpack.config.js中的module中配置。ts-loader包可以将typescript包和webpack结合起来。
- html-webpack-plugin：要在webpack.config.js中引入，并在plugin中配置。可以自动生成index.html并引入相关文件。（详情见第3）
- clean-webpack-plugin：要在webpack.config.js中引入，并在plugin中配置。可以在每次打包文件时，清空旧文件。
- webpack-dev-server：要在package.json中配置。可以启动webpack内置服务器，实现热更新和反向代理等。（详情见第1）
- @babel/core：无需引入，直接在webpack.config.js的module中配置。处理代码的兼容性问题。
- @babel/preset-env：无需引入，直接在webpack.config.js的module中配置。处理代码的兼容性问题。
- babel-loader：无需引入，直接在webpack.config.js的module中配置。可以将babel和webpack结合起来。
- core-js：无需引入，直接在webpack.config.js的module中配置。处理代码的兼容性问题。
3.配置webpack文件
新增 文件。
/** https://www.webpackjs.com/concepts/modules/#what-is-a-webpack-module */
// 引入path模块
const path = require('path');
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean-webpack-plugin插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// webpack的所有配置都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: './src/index.js',
// 指定打包文件所在目录
output: {
path: path.resolve(__dirname, 'dist'), // 指定打包文件的目录
filename: 'bundle.js', // 打包后文件的名字
environment: {
arrowFunction: false, // 关闭webpack的箭头函数，以兼容低版本浏览器
},
},
// 指定webpack打包时要使用的模块。（各种loader在此使用）
module: {
// 配置规则
rules: [
{
// 用正则表达式匹配文件
test: /\.ts$/,
// 指定要使用的loader
use: [
// 使用babel-loader
{
loader: 'babel-loader',
options: {
// 设置预定义的代码运行环境
presets: [
[
// 指定环境的插件
'@babel/preset-env',
// 配置信息
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: 3,
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
// 使用ts-loader。简写版，等同于 { loader: 'ts-loader' }
'ts-loader',
],
// 需要排除的文件，排除node_modules目录
exclude: /node_modules/
}
]
},
// 配置插件
plugins: [
// 创建一个在内存中生成html文件的插件
new HtmlWebpackPlugin({
template: './src/index.html' // 指定index.html的模板文件
}),
// 打包时删除dist目录的旧文件
new CleanWebpackPlugin(),
],
// 设置哪些文件可以作为模块来引用
resolve: {
// 指定扩展名是.js或.ts的文件可以作为模块来引用。例如: import './index' 会自动解析为 import './index.js'
extensions: ['.js', '.ts']
}
}
