2021 iThome 鐵人賽

DAY 30
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 30

Day29:歪樓無極限(全英文筆記 - III)


但因為下個月又有六角的活動,也許我會想去嘗試看看,寫一點 open api 的應用,希望年底前能抽出時間來重新翻修這個系列了。

繼續補充昨天的筆記,針對 webpack 專案若要支援 TypeScript,該如何設定。

Support TypeScript

I hope this project can support TypeScript, so need install and setting typescript plugin.

npm install typescript ts-loader -D

change index.js -> index.ts and writting somthing.

// index.ts

const target: string = 'Hello TypeScript';

Webpack default it will look for files with the extension .js file, and the rule of TypeScript requires not to write the extension when importing file.

Between the two will conflict, so need to change the default search extension file in the resolve. The first pick for TypeScript.

In the rules, need to add node_modules to exclude is to avoid affecting. After all, not every plugin uses Typescript.

module.exports = {
  entry: './src/index.ts',
  resolve: {
    extensions: ['.ts', '.js', '.json'],
  module: {
    rules: [
      // ...
        test: /\.ts$/,
        use: ['ts-loader'],
        exclude: /node_modules/,

Finally, mkdir tsconfig.json, this file can write rules about TypeScript.

  "compilerOptions": {
    "module": "ES6",
    "target": "ES5"

Now, npm run dev, the content of index.ts printed in browser normally.

Day28:繼續歪樓(全英文筆記 - II)
摸索 WebSocket,遠望 WebRTC30