TS: 環境構築 やったこと

環境構築

1. node.jsのインストール

2. ターミナルで, プロジェクトディレクトリに移動する

3. npm init -yすると, package.jsonが作成される

4. npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-serverでパッケージをインストール

5. webpack.config.js, dist作成

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  resolve: {
    extensions: [".ts", ".js"],
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    open: true,
  },
  module: {
    rules: [
      {
        use: "ts-loader",
        test: /\.ts$/,
        exclude: /node_modules/,
      },
    ],
  },
};

6. package.jsonの"scripts"を書き換える

package.json

  "scripts": {
   "build": "webpack",
   "start": "webpack-cli serve --mode development"
 },

7. ターミナルでnpx tsc --init, tsconfig.jsonが作成される