開発環境 | TypeScript

Babel + Webpack

ディレクトリ構造

project root
   |
   |-- public
       |
       |-- js
   |
   |-- src
       |
       |-- ts
           |--index.ts

環境構築概要

1. Babelをインストール
2. Webpackをインストール
3. webpack.config.jsを作成
4. package.jsonにbrowserslistプロパティを追加
5. package.jsonにscriptsを追加
6. tsconfig.jsonを追加

Babelをインストール

$ npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-typescript

Webpackをインストール

$ npm install -D webpack webpack-cli

webpack.config.jsを作成

module.exports = {
    mode: 'development', // or production
    entry: {
        index: './src/ts/index.ts',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/public/js',
    },
    optimization: {
        minimize: true,
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                // 拡張子 .js の場合
                test: /\.ts$/,
                use: [
                    {
                        // Babel を利用する
                        loader: 'babel-loader',
                        // Babel のオプションを指定する
                        options: {
                            presets: [
                                '@babel/preset-typescript',
                                // プリセットを指定することでES5に変換
                                // 配列で指定する必要がある
                                ['@babel/preset-env',{ "targets": "defaults" }],
                            ],
                        },
                    },
                ],
            },
        ],
    },
};

@babel/preset-envのtargetとbrowserslistの関係は以下を参照。
https://babeljs.io/docs/en/babel-preset-env#options

package.jsonにbrowserslistプロパティを追加

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "Firefox ESR",
    "IE 11"
  ]
}

package.jsonにscriptsを追加

{
  "scripts": {
    "build": "webpack"
  }
}

tsconfig.json

• https://www.typescriptlang.org/tsconfig
• https://qiita.com/ryokkkke/items/390647a7c26933940470
• https://zenn.dev/mitsuyoshi/articles/3bb19923585091

{
    "compilerOptions": {
      "target": "es5", 
      "lib": [
          "ESNext"
      ],
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true
}

ref.

• Babel
• webpack

実行

$ npm run build

ts-node

npm i ts-node -D

{
    "scripts": {
        "run": "ts-node ./src/ts/app.ts",
    }
}