Webpack,TypeScript,Reactで最小限の開発環境を作ってみる

概要

ここ2ヶ月くらい仕事でTypeScript、Reactを書いてたけど、できてた環境に機能開発していったので
自分で環境作れるように１から作った作業メモ！！
noteなるものに頑張って書いてみたが、Markdown効かないのつらめなのではてぶろに戻ってきた

目標

「コマンド実行したらTypeScriptがトランスパイルされて、出力されたjsファイルを読み込んだhtmlファイルが機能すること！」

作業内容

パッケージ管理の下準備

npm initでpackage.json生成 interactiveに色々聞かれるが全部クリック

パッケージ色々インストール

TypeScript

npm install typescript --save-dev
※ 最初なんだかエラー出てきたが、package.jsonのname項目とインストール対象の名前が一緒じゃいけないらしい。nameを変えてコマンドもう一度叩く。
※ node_modulesを.gitignoreに追記しとく

webpack

npm install webpack webpack-cli awesome-typescript-loader --save-dev
モジュールバンドラー（jsファイルの生成などを行う）webpackのインストール。
コマンドラインで実行するためのwebpack-cli、webpackからtypescriptコンパイラを動かすawesome-typescript-loaderをインストール

react

npm install react react-dom @types/react @types/react-dom --save
reactは本番でも使うので--save-devじゃなく--save

webpackが動作するように設定

とりあえず動かす

package.jsonのscripts項目にwebpackのバージョンを確認するversionコマンドを記載

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "version": "webpack -v"
}

npm run versionを実行するとwebpackのバージョンが表示される。
※ package.json経由でコマンドを実行するとnode_modules配下のコマンドが実行される

プロジェクト用の最低限の設定で動かす

tsconfigを設定

• tsc --initでtypescript用のコンパイラ設定
  • tsconfig.jsonの"jsx": "preserve",を"jsx": "react",に変更

webpack.config.jsを設定

とりあえず最低限の設定をする

module.exports = {
  entry: {
    index: "./src/index.tsx"
  },
  output: {
    path: __dirname + '/dist',
    filename: "[name].js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    // ファイルタイプに対するloaderの設定
    rules: [
      {
        test: /\.tsx?$/,
        use: 'awesome-typescript-loader',
      },
    ]
  }
};

実行

• パッケージのインストール
  • npm install
• ビルド実行
  • npm run build
• ブラウザで確認
  • public/index.htmlをブラウザで表示

まとめ

以外に簡単に動くものができた。
気になることがあればこのレポジトリを実験場にしていこー