教你使用webpack打包編譯TypeScript代碼

更新時(shí)間：2021年06月29日 09:54:13 作者：韓子昕

TypeScript同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TypeScript，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧

TypeScript打包

webpack整合

通常情況下，實(shí)際開(kāi)發(fā)中我們都需要使用構(gòu)建工具對(duì)代碼進(jìn)行打包；

TS同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TS；

步驟如下：

初始化項(xiàng)目

進(jìn)入項(xiàng)目根目錄，執(zhí)行命令 npm init -y，創(chuàng)建package.json文件

下載構(gòu)建工具

命令如下：

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安裝了7個(gè)包:

webpack：構(gòu)建工具webpack
webpack-cli：webpack的命令行工具
webpack-dev-server：webpack的開(kāi)發(fā)服務(wù)器
typescript：ts編譯器
ts-loader：ts加載器，用于在webpack中編譯ts文件
html-webpack-plugin：webpack中html插件，用來(lái)自動(dòng)創(chuàng)建html文件
clean-webpack-plugin：webpack中的清除插件，每次構(gòu)建都會(huì)先清除目錄

配置webpack

根目錄下創(chuàng)建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 // 關(guān)閉代碼壓縮，可選
   },

   entry: "./src/index.ts",

   devtool: "inline-source-map",

   devServer: {
       contentBase: './dist'
   },

   output: {
       path: path.resolve(__dirname, "dist"),
       filename: "bundle.js",
       environment: {
           arrowFunction: false // 關(guān)閉webpack的箭頭函數(shù)，可選
       }
   },

   resolve: {
       extensions: [".ts", ".js"]
   },

   module: {
       rules: [
           {
               test: /\.ts$/,
               use: {
                   loader: "ts-loader"     
               },
               exclude: /node_modules/
           }
       ]
   },

   plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           title:'TS測(cè)試'
       }),
   ]
}

配置TS編譯選項(xiàng)

根目錄下創(chuàng)建tsconfig.json，配置可以根據(jù)自己需要

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

修改package.json配置

修改package.json添加如下配置

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

項(xiàng)目使用

在src下創(chuàng)建ts文件，并在并命令行執(zhí)行npm run build對(duì)代碼進(jìn)行編譯；

或者執(zhí)行npm start來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器；

Babel

除了webpack，開(kāi)發(fā)中還經(jīng)常需要結(jié)合babel來(lái)對(duì)代碼進(jìn)行轉(zhuǎn)換；

以使其可以兼容到更多的瀏覽器，在上述步驟的基礎(chǔ)上，通過(guò)以下步驟再將babel引入到項(xiàng)目中；

雖然TS在編譯時(shí)也支持代碼轉(zhuǎn)換，但是只支持簡(jiǎn)單的代碼轉(zhuǎn)換；

對(duì)于例如：Promise等ES6特性，TS無(wú)法直接轉(zhuǎn)換，這時(shí)還要用到babel來(lái)做轉(zhuǎn)換；

安裝依賴包：

npm i -D @babel/core @babel/preset-env babel-loader core-js

共安裝了4個(gè)包，分別是：

@babel/core：babel的核心工具
@babel/preset-env：babel的預(yù)定義環(huán)境
@babel-loader：babel在webpack中的加載器
core-js：core-js用來(lái)使老版本的瀏覽器支持新版ES語(yǔ)法

修改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/
        }
    ]
}

如此一來(lái)，使用ts編譯后的文件將會(huì)再次被babel處理；

使得代碼可以在大部分瀏覽器中直接使用；

同時(shí)可以在配置選項(xiàng)的targets中指定要兼容的瀏覽器版本；

到此這篇關(guān)于使用webpack打包編譯TypeScript代碼的文章就介紹到這了,更多相關(guān)webpack打包編譯TypeScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: