一：TypeScript和webpack配置文件
- 生成文件tsconfig.json文件，里面存储ts的配置选项
- 生成dist文件（名字可以改变），存储ts编译的js文件
{
/**
* tsconfig.json是编译器的配置文件，
*ts编译器可以根据他的信息来对代码进行编译
* "include"用来指定那些ts文件需要被编译
*/
// 包含文件
"include": [
// 一个*表示任意文件
// 两个**表示任意目录
// 现在表示根目录下的src文件下的任意目录，任意文件都会编译
"/src/*",
],
// 不包含文件
"exclude": [
// "./src/tsconfig.json/**/*"
],
// 表示 定义继承的配置文件
// "extends": "",
// 编译的文件 一个个文件 麻烦
// "files": [],
// 编译器的选项
"compilerOptions": {
// ts语言被编译的js版本 ESNext表示最新版本的es
// 参考值es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext
"target": "es2015",
// 模块化的规范
// 参考值none, commonjs, amd, umd, system, es6/es2015, es2020, es2022, esnext, node12, nodenext
"module": "es2015",
// 指定项目用到的库
// 参考值es5, es6/es2015, es7/es2016, es2017, es2018, es2019, es2020, es2021, es2022, 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/esnext.asynciterable, es2018.intl, es2018.promise, es2018.regexp, es2019.array, es2019.object, es2019.string, es2019.symbol
// esnext.symbol, es2020.bigint/esnext.bigint, es2020.promise, es2020.sharedmemory, es2020.string, es2020.symbol.wellknown, es2020.intl, es2021.promise/esnext.promise, es2021.string, es2021.weakref
// esnext.weakref, es2021.intl, es2022.array/esnext.array, es2022.error, es2022.
// object, es2022.string/esnext.string, esnext.intl
"lib": [],
// 表示编译的js文件放的目录
"outDir": "/dist",
// 将代码合并成一个文件
// 设置outfile后，所有的全局作用域中的代码合并到同一文件中
// 模块只能使用system和少数
// "outFile": "/dist/app.js"
// 是否对js文件进行编译，默认是false 不编译，true编译
"allowJs": true,
// 是否检查js代码是否符合语法规范，默认是false
"checkJs": false,
// 是否编译注释 默认值是false不编译过去
"removeComments": true,
// 不生成编译后的文件 true时不生成js
"noEmit": false,
// 所有严格检查的总开关
"strict": true,
// 当有错误时，不生成错误文件
"noEmitOnError": true,
//用来设置编译后的文件是否使用严格模式，默认false
"alwaysStrict": false,
//不允许隐私any类型
"noImplicitAny":true,
//不容许不明确的this
"noImplicitThis": true,
// 严格检查空值
"strictNullChecks": true,
}
}
二：webpack结合typescript打包代码
- 对项目初始化 npm init -y （文件会生成package.json文件，）
- cnpm i -D开发依赖
-
- 第一个包打包工具核心代码webpack
- 第二个包webpack的命令行 工具webpack-cli
- 第三个包ts语言核心包typescript
- 第四个包（必装，整合ts和webpack为一体的工具）ts-loader
- 创建webpack.config.js文件 进行编写
// 引入一个包
const path = require('path');
// webpack中的所有配置信息都应该写在module.exports中
module.exports={
// 入口文件 主文件
entry:"./src/index.ts",
// 指定打包文件目录
output:{
// 指定打包文件的目录
path:path.resolve(__dirname,'dist'),
// 打包后文件的文件
filename:'bundle.js'
},
// 指定webpack打包时要使用的模块
module:{
//指定加载的规则
rules:[
{
// text 指定的是规则生效的文件
test:/.ts$/,
// 要使用的loader，
use:'ts-loader',
// 要排除的文件
exclude:/node-modules/
}
]
}
}
4.创建tsconfig.json文件 进行编写
{
"compilerOptions": {
// 以es2015模块编译
"module": "ES2015",
"target": "ES2015",
// 严格模式
"strict": true,
},
}
5.增加package.json文件的调试
版本配合问题注意
{
"name": "part2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
//增加 webpack的调试 复制粘贴时把注释删掉
"build":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^5.6.0",
"webpack-cli": "^4.9.2"
},
}
babel使用 文件存在问题
- 下载babel插件 package.json文件版本配合问题注意
{
"name": "part2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.0",
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^5.6.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1"
},
"dependencies": {}
}
2.webpack.config.js文件编写
// 引入一个包
const path = require('path');
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { title } = require('process');
// 引入clean插件
const { CleanWebpackplugin } = require('clean-webpack-plugin')
// webpack中的所有配置信息都应该写在module.exports中
module.exports={
// 入口文件 主文件
entry:"./src/index.ts",
// 指定打包文件目录
output:{
// 指定打包文件的目录
path:path.resolve(__dirname,'dist'),
// 打包后文件的文件
filename:'bundle.js',
// 告诉webpack不使用箭头函数
environment:{
arrowFunction:false
}
},
// 指定webpack打包时要使用的模块
module:{
//指定加载的规则
rules:[
{
// test 指定的是规则生效的文件 所有以ts结尾的文件
test:/.ts$/,
// 要使用的loader，
use:[
// 配置babel
{
// 指定加载器
loader:"babel-loader",
// 设置babel
Option:{
// 设置预定义环境 代码需要在那些浏览器执行
presets:[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
// 谷歌的88版本
"chrome":"88",
// ie老版本语言
"ie":"11"
},
//指定corejs版本
"dorejs":"3",
// 使用corejs的方式“usage”表示按需加载
// 用哪个加载那个
"useBuiltIns":"usage",
}
]
}
},
"ts-loader"
],
// 要排除的文件
exclude:/node_modules/
}
]
},
plugins:[
// 引入cleanWebpackPlugin（插件）
new CleanWebpackplugin(),
new HtmlWebpackPlugin({
title:'这是一个自定义的title',
// template:"./src/index.html"
}),
],
// 用来设置引用模块
resolve:{
// 告诉import 后缀是ts和js的都可以作为模块引入
extensions:['.ts','.js']
}
}
3.创建tsconfig.json文件 进行编写
{
"compilerOptions": {
// 以es2015模块编译
"module": "ES2015",
"target": "ES2015",
// 严格模式
"strict": true,
},
}