TypeScript中的webpack和Babel(三)

一、webpack

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

（2）步骤：

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

//引入path包
const path = require("path");
//引入生成html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入CleanWebpackPlugin插件，每次打包时都会先把dist文件先删除再生成新的dist文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//webpack中的所有的配置信息都应该写在module.export中
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的箭头函数，可选（兼容ie）
        }
    },
    //用来设置引用模块，表示.ts,.js可以作为模块进行引用
    resolve: {
        extensions: [".ts", ".js"]
    },
    //指定webpack打包时要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定的是规则生效的文件，下面表示已.ts结尾的文件
                test: /\.ts$/,
                //要使用的loader
                use: {
                   loader: "ts-loader"     
                },
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    },
    //配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            //自定义html的标题
            title:'TS测试'
            //或者可以引入html模板
            template:'./src/index.html'
        }),
    ]

}

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

（1）经过一系列的配置，使得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配置文件  

...略...
module: {
    rules: [
        {
            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"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...

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

三、总结

  webpack作为一种构建工具可以结合ts进行使用，使得ts在项目中开发中更加方便和高效，babel则主要是对js进行进一步的处理使得可以更好的兼容其他浏览器