1 webpack

• 通常情況下，實際開發中我們都需要使用構建工具對程式碼進行打包，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.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來啟動開發伺服器

2、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配置檔案

     • ...略...
       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/
               }
           ]
       }
       ...略...
       

     • 如此一來，使用ts編譯後的檔案將會再次被babel處理，使得程式碼可以在大部分瀏覽器中直接使用，可以在配置選項的targets中指定要相容的瀏覽器版本。