Typescript – webpack 与 babel 配置

简介

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

Webpack 配置步骤

步骤：

1. 初始化项目

   • 进入项目根目录，执行命令 npm init -y
     • 主要作用：创建package.json文件

2. 下载构建工具

   • 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中的清除插件，每次构建都会先清除目录

3. 根目录下创建webpack的配置文件webpack.config.js

   • const path = require("path");
     const HtmlWebpackPlugin = require("html-webpack-plugin");
     const { CleanWebpackPlugin } = require("clean-webpack-plugin");
     
     module.exports = {
         optimization:{
             minimize: false // 关闭代码压缩，可选
         },
     
         entry: "./src/index.ts",
         
         devtool: "inline-source-map",
         
         devServer: {
             contentBase: './dist'
         },
     
         output: {
             path: path.resolve(__dirname, "dist"),
             filename: "bundle.js",
             environment: {
                 arrowFunction: false // 关闭webpack的箭头函数，可选
             }
         },
     
         resolve: {
             extensions: [".ts", ".js"]
         },
         
         module: {
             rules: [
                 {
                     test: /\.ts$/,
                     use: {
                        loader: "ts-loader"     
                     },
                     exclude: /node_modules/
                 }
             ]
         },
     
         plugins: [
             new CleanWebpackPlugin(),
             new HtmlWebpackPlugin({
                 title:'TS测试'
             }),
         ]
     
     }
     

4. 根目录下创建tsconfig.json，配置可以根据自己需要

   • {
         "compilerOptions": {
             "target": "ES2015",
             "module": "ES2015",
             "strict": true
         }
     }
     

5. 修改package.json添加如下配置

   • {
       ...略...
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack",
         "start": "webpack serve --open chrome.exe"
       },
       ...略...
     }
     

6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器。

Babel 配置步骤

经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

1. 安装依赖包：

   • 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语法

2. 修改webpack.config.js配置文件

     // 指定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/
         },
   

   如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。