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';
console.log(target);

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.