@[TOC]
webpack
- 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
步骤：
初始化项目
进入项目根目录，执行命令
npm init -y主要作用：创建package.json文件
我们既然需要用到webpack，那么我们肯定要用到npm这个包管理器，所以我们不能少了package.json文件(这个文件用来管理我们的项目)
下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
这里我们可以使用npm安装，也就可以使用cnpm安装，其中cnpm使用的是国内的源，所以相对来说会更快一点。
安装完之后你会发现多了一个配置项，并且里面有你刚刚下载的依赖：
i表示install，安装
-D表示开发依赖共安装了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 = {
// 指定入口文件
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":"58",
"ie":"11"
},
// 指定corejs的版本
"corejs":"3",
// 使用corejs的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
}
]
},
// 配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"
template: "./src/index.html"
}),
],
// 用来设置引用模块
resolve: {
extensions: ['.ts', '.js']
}
};根目录下创建tsconfig.json，配置可以根据自己需要
{ "compilerOptions": { "target": "ES2015", "module": "ES2015", "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来启动开发服务器
babel
经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将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.config.js配置文件
...略... module: { rules: [ { test: /\.ts$/, use: [ { loader: "babel-loader", options:{ presets: [ [ "@babel/preset-env", { "targets":{ "chrome": "58", "ie": "11" }, "corejs":"3", "useBuiltIns": "usage" } ] ] } }, { loader: "ts-loader", } ], exclude: /node_modules/ } ] } ...略...- 如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
