tsconfig.json 基础配置文件
{ /* include:用来指定哪些ts文件需要被编译 路径：**表示任意目录 *表示任意文件 exclude:不需要被编译的文件目录 默认值：["node"] */ "include": ["./src/*"], // "exclude": ["./node_modules/*"], "compilerOptions": { //target: js的版本 /* 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'. */ "target": "es2015", "module": "amd", //module 规范 /* 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'. */ "lib": ["es6","dom"], //lib 项目中需要使用的库 /* 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref' */ //用来指定编译后文件所在的目录 "outDir": "./dist", //设置outFile后，室友的全局作用域中的代码会合并到同一个文件中 // "outFile": "./dist/app.js", //是否对js文件进行编译 默认不编译 "allowJs": true, //是否检测js "checkJs":true , //是否移除注释 默认false "removeComments":true , //不生成编译后的文件(默认false) 即只是用ts的检查功能补使用ts的编译功能 "noEmit":false , //当有错误时不生产编译后的文件 默认false "noEmitOnError":true , //所有严格检查的总开关 默认false(true 全部打开 false 全部关闭) "strict": true, // 开启严格模式 默认false "alwaysStrict": true, //不允许隐式any 类型 默认false "noImplicitAny":true, //不允许this 类型是否明确 默认false "noImplicitThis":true , //严格的检查空值 默认false "strictNullChecks":true , } }
项目初始化
npm init
下载webpack 及相应的loader
npm i -D webpack webpack-cli typescript ts-loader
package.json 配置
{ "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build":"webpack" }, "author": "", "license": "ISC", "devDependencies": { "ts-loader": "^9.2.6", "typescript": "^4.4.4", "webpack": "^5.59.1", "webpack-cli": "^4.9.1" } }
webpack 编译ts 配置
const path=require('path');
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.js 打包配置文件
{ "include": ["./src/*"], "compilerOptions": { "target": "es2015", "module": "es2015", "strict": true } }
html-webpack-plugin 插件打包html模板
npm install -D html-webpack-plugin
webpack.config.js 配置 打包生成html模板 并自动引入 打包后的js css 等文件
const path=require('path');
//引入html插件
const HTMLWebpackPlugin=require('html-webpack-plugin')
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/
}
]
},
//配置webpack插件
plugins:[
new HTMLWebpackPlugin(),
]
}
安装webpack-dev-server 内置服务器
npm install -D webpack-dev-server
package中添加一条指令
"start":"webpack serve --open chrome.exe"
安装 clean-webpack-plugin 插件 每次打包先清空上次的文件 保证每次都是生成的最新文件
npm install -D clean-webpack-plugin
最终打包编译 webpack.config.js文件
const path=require('path');
//引入html插件
const HTMLWebpackPlugin=require('html-webpack-plugin')
//引入 clear插件
const { CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports={
//解决模块化 webpack 不能识别文件的问题
resolve:{
//拓展名 帮助webpack识别文件
extensions:['.ts','js']
},
//入口文件
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/
}
]
},
//配置webpack插件
plugins:[
//打包之前清空之前生成的配置文件
new CleanWebpackPlugin(),
//html模板插件
new HTMLWebpackPlugin({
// title:'这是一个app的标题',
//自己提供一个模板 或者使用他带的模板
template:'./src/index.html',
}),
]
}
使用webpack 借助babel打包生成ts 代码 并兼容各个浏览器
npm install -D @babel/core @babel/preset-env babel-loader core-js
最终配置好的webpack.config.js
const path = require('path')
//引入html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
//解决引入模块webpack不能识别的问题
resolve: {
extensions: ['.ts', 'js']
},
//入口
entry: './src/index.ts',
//出口
output: {
path: path.resolve(__dirname, "dist"),
filename: 'bundle.js',
//让webpack不使用箭头函数
environment: {
arrowFunction: false
}
},
//加载机
module: {
rules: [
//ts-loader
{
test: /.ts$/,
//单个加载器可以使用字符串 多个使用数组
// use: 'ts-loader',
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets: {
"chrome": "58",
"ie": "11"
},
// 指定corejs的版本
// package.json中的版本为3.8.1
"corejs": "3",
// 使用corejs的方式，"usage" 表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader',
],
exclude: /node_modules/
}
]
},
//插件
plugins: [
//Clean插件
new CleanWebpackPlugin(),
//Html模板插件
new HtmlWebpackPlugin({
// title:'hello world',
template: "./src/inde.html"
})
]
}