TypeScript打包

webpack打包ts代码

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包；

TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；

步骤如下：

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的配置文件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.配置TS编译选项

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

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

5.修改package.json配置

修改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（代码转化）

除了webpack，开发中还经常需要结合babel来对代码进行转换；

以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将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语法，模拟js环境

修改webpack.config.js配置文件

...
module: {
    rules: [
        {
            test: /\.ts$/,
            //配置babel
            use: [
                {
                    //指定加载器
                    loader: "babel-loader",  //第二部：再把‘从ts转换过来的新版本的js’转换成旧版本的js
                    //设置babel
                    options:{
                        //设置预定义的环境
                        presets: [
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                {
                                    //配置信息
                                    "targets":{
                                        "chrome": "58", //兼容chrome的运行版本
                                        "ie": "11"   //兼容的ie的运行版本
                                    },
                                    "corejs":"3",//指定用哪个版本的core-js
                                    "useBuiltIns": "usage" //使用core-js的方式 usage表示按需加载
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",  // 第一步：从后往前执行 把ts转换成js
                }
            ],
            exclude: /node_modules/
        }
    ]
}
...

如此一来，使用ts编译后的文件将会再次被babel处理；

使得代码可以在大部分浏览器中直接使用；

同时可以在配置选项的targets中指定要兼容的浏览器版本。

声明：本文内容引自bilibili “尚硅谷TypeScript教程”
个人学习归纳总结，欢迎畅谈。

TypeScript的代码打包