TypeScriptを導入する

TypeScript npm Vagrant 環境構築 webpack

はじめに

nodejsとnpmは導入済み(導入方法)

設定編 TypeScript開発の設定と流れ - siunのメモ

入れるもの

  • TypeScript
  • webpack

TypeScript

1. コンパイラを入れる
$ npm i typescript -g
// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node"
  }
}

webpack

1. npmで必要モジュールを入れる
$ npm i -D webpack webpack-cli typescript ts-loader
  • i: install
  • -D: --save-dev (devDependenciesに追加)
  • ts-loaderはwebpackでTypeScript処理するために必要
  • 1つ前に入れたTypeScriptコンパイラとダブって見えるが、ts-loader使うために必要らしい
2. tsファイルの処理をts-loaderで行う
// webpack.config.js
module.exports = {
  mode: 'development',
  entry: './script.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
  }
};

その他

  • vagrant環境でnpm installをする場合、共有フォルダで行うとエラーが起こるので避けること

参照