demo05 webpack + typescript

1.關於 typescript

typescript（簡稱 ts ）是 javascript 的超集，具備類型系統，是可編譯的。能夠想象獲得，在代碼運行以前可以進行代碼類型檢查和編譯是多麼重要的事兒（就像 Java 等強類型語言同樣）。

好比前端框架 @Angular 就默認集成了 ts , 賦予了 @Angular 項目能夠編譯的功能。

對 ts 不瞭解的? 先擼一遍 ts 文檔?：www.tslang.cn/docs/handbo…

ts 默認根據 tsconfig.json 配置文件（很強大）來對 ts 進行編譯。

ts 能夠單獨使用 typescript 編譯器編譯，也能夠在 webpack 中經過 ts-loader 來進行編譯（相似於 babel-loader ）。

2.安裝相關依賴

typescript 相關

npm install --save-dev typescript
複製代碼

webpack 相關

npm install --save-dev ts-loader
複製代碼

3.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo05
    --src
      -app.js
      -User.js
    -index.html
    -tsconfig.json
    -webpack.config.js
複製代碼

src/app.js

import { User } from './User';

const user1: User = {
  name: 'simple',
  age: '25',
  hobby: 'play the guitar'
};

// 這裏參數不夠，tsc編譯器會報錯，webpack編譯不經過
// const user2: User = {
// name: 'simple2',
// age: '25'
// };

console.log(user1);
複製代碼

src/User.ts

export interface User {
  name: String,
  age: String,
  hobby: String,
  options?: Object // 可選參數
}

// 理解一下 webpack 的 Tree Sharking?
export interface Animal {
  name: String
}
複製代碼

4.編寫 tsconfig.json 配置文件

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "lib": [
      "es2018",
      "dom"
    ],
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}
複製代碼

關於 tsconfig.json 滿多學問的，具體的配置根據項目或者參考配置文檔來：www.tslang.cn/docs/handbo…

也能夠找一些開源項目，看一下別人是怎麼配置的。

5.編寫 webpack 配置文件

webpack.config.js

const path = require("path");
module.exports = {
  mode: 'production' || 'development',
  entry: {
    index: "./src/app.ts"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
}
複製代碼

6.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

打包成功後，會在demo05目錄下生成 dist/app.bundle.js

7.驗證打包結果

建立 index.html 文件,引用打包生成的主文件 (app.bundle.js), 分別用 ie , Chrome 瀏覽器打開，並查看控制檯。

輸出結果：

{name: "simple", age: "25", hobby: "play the guitar"}
複製代碼

8.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…