TypeScript打包

webpack整合

通常情況下，實際開發中我們都需要使用構建工具對程式碼進行打包；

TS同樣也可以結合構建工具一起使用，下邊以webpack為例介紹一下如何結合構建工具使用TS；

步驟如下：

初始化專案

進入專案根目錄，執行命令 npm init -y，建立package.on檔案

下載構建工具

命令如下：

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中的清除外掛，每次構建都會先清除目錄

配置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測試'
       }),]
}

配置TS編譯選項

根目錄下建立tsconfig.json，配置可以根據自己需要

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

修改package.jhttp://www.cppcns.comson配置

修改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

除了webpack，開發中還經常需要結合babel來對程式碼進行轉換；

以使其可以相容到更多的瀏覽器，在上述步驟的基礎上，通過以下步驟再將babel引入到專案中；

雖然TS在編譯時也支援程式碼轉換，但是隻支援簡單的程式碼轉換；

對於例如：Promisehttp://www.cppcns.com等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語法

修改webpack.config.js配置檔案

module: {
    rules: [
        {
            test: /\.ts$/,use: [
                {
                    loader: "babel-loader",options:{
                        presets: [
                            [
                                "@babel/preset-env",{
           PXtmLTTH                         "targets":{
                                        "chrome": "58","ie": "11"
                                    },"corejs":"3","useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },{
                    loader: "ts-loader",}
            ],PXtmLTTH        exclude: /node_modules/
        }
    ]
}

如此一來，使用ts編譯後的檔案將會再次被babel處理；

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

同時可以在配置選項的targets中指定要相容的瀏覽器版本；

到此這篇關於使用webpack打包編譯TypeScript程式碼的文章就介紹到這了,更多相關webpack打包編譯TypeScript內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！