ts的简单编译配置方式
- tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译,文件中指定了用来编译这个项目的根文件和编译选项。
typescript api
{
/*
"include" 用来指定哪些ts文件需要被编译
*/
"include": [
"./src/**/*" /* *** 路径：一个* 表示任意文件，两个*表示任意目录 */
],
"exclude": [
"./src/hello/**/*" /* *** 指定不编译 默认值 ["node_modules", "bower_components", "jspm_packages"] */
],
/* "extends": "./configs/base", */ /* 定义被继承的配置文件 */
"files": [/* 指定被编译文件的列表，只有需要编译的文件少时才会用到 */
/* "hello.ts", */
"app.ts"
],
"compilerOptions": {
"target": "es2016",/* *** 默认 es3 版本有'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext' esnext为最新版本 */
"module": "system",/* *** 指定要使用的模块化的规范 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext' */
/* "lib": [] *** lib 用来指定项目中要使用的库 一般不用指定，一般在非浏览器环境可以指定 Argument for '--lib' option must be: 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', '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', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref' */
"outDir": "./dist",/* *** 用来指定编译后文件所在的目录 */
"outFile": "./dist/app.js",/* 将代码合并为指定的一个文件，所有的全局作用域中的代码会合并到一个文件中，含有导入的模块化的信息，要根据模块化的配置 */
"allowJs": true ,/* 是否对js文件进行编译，默认是false 即编译到dist目录下 */
"checkJs": true,/* 是否对js文件代码检查语法规范，默认是false */
"removeComments": true,/* 是否移除注释 默认false */
"noEmit": false, /* 不生成编译后的文件 默认false */
"noEmitOnError": true,/* 当有错误时， 不生成编译后的文件 */
"strict": true,/* 所有严格检查的总开关，打开后下面的可以不写了 */
"alwaysStrict": true,/* 用来设置编译后的文件是否使用严格模式，默认false，在有导入的文件中默认是使用严格模式的，即有import 。。。 */
"noImplicitAny": true,/* 不允许隐式的any类型 */
"noImplicitThis": true,/* 不允许不明确类型的this */
"strictNullChecks": true,/* 严格的检查空值 示例见app.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中的清除插件，每次构建都会先清除目录
兼容性考虑 babel
除了webpack，开发中还经常需要结合babel来对代码进行转换；
虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；
对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换
安装依赖包：
npm i -D @babel/core @babel/preset-env babel-loader core-js
共安装了4个包，分别是：
@babel/core：babel的核心工具
@babel/preset-env：babel的预定义环境
@babel-loader：babel在webpack中的加载器
core-js：core-js用来使老版本的浏览器支持新版ES语法
配置webpack
根目录下创建webpack的配置文件webpack.config.js：
// 引入一个包
const path=require('path');
// 引入HTML插件
const HTMLWebpackPlugin= require('html-webpack-plugin');
// 引入clean dist文件的插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
// webpack中的所有的配置信息都应该卸载module.export中
module.exports={
// 指定入口文件
entry:"./src/index.ts",
// 指定打包文件所在目录
output:{
// 指定打包文件的目录
path:path.resolve(__dirname,'dist'),
// 打包后的文件
filename:"bundle.js",
// 告诉webpack不使用箭头函数
environment:{
arrowFunction:false
}
},
// 指定webpack打包时要使用的模块
module:{
// 指定加载的规则
rules:[
{
// test 指定的是规则生效的文件
test:/\.ts$/,
// 要使用的loader
use:[
// 配置babel
{
// 指定加载器
loader:"babel-loader",
// 设置babel
options:{
presets:[
[
// 指定预定义的环境
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"88",/* 兼容的浏览器版本 */
"ie":"11"
},
// 指定corejs的版本
"corejs":"3",
// 使用corejs的方式“usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],/* 配置文件数组中，写在后面的先执行 */
// 要排除的文件
exclude:/node_modules/
}
]
},
// 配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title:"这是一个自定义的title",/* 自定义网页title名 */
template:"./src/index.html",/* 以此路径的HTML为模板 */
})
],
// 用来设置引用模块,即哪些文件可以当成模块使用
resolve:{
extensions:['.ts','.js']
}
}
配置TS编译选项(简单配置)
根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true,
"noEmitOnError": true,//当有错误不生成编译文件
}
}
修改package.json配置
修改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来启动开发服务器；
如此一来，使用ts编译后的文件将会再次被babel处理；
使得代码可以在大部分浏览器中直接使用；
同时可以在配置选项的targets中指定要兼容的浏览器版本；
学习文档链接：https://github.com/JasonkayZK/typescript_learn/tree/3-webpack
学习视频链接：https://www.bilibili.com/video/BV1Xy4y1v7S2?p=6