webpack + typescript

なぜtypescript？

MSが作ってGoogleが採用したので、フロントエンド界隈でtypescriptがしばらく積極的に使われて来そうな気が予感がしたのと、そろそろフロントエンドのキャッチアップしとかないとなーと感じ始めていたので...

typescriptの導入

typescriptをwebpackでコンパイルできるようにします。 https://webpack.js.org/guides/typescript/ を参考にして導入しました。

yarnでinstall

$ yarn add -D typescript ts-loader inline-source-map

ts-loader
refs: https://github.com/TypeStrong/ts-loader

tsの設定

tsconfig.jsonを作成する

$ touch tsconfig.json
$ ls -la
drwxr-xr-x    - user 14 10  0:56 .idea
drwxr-xr-x    - user 14 10  0:56 dist
drwxr-xr-x    - user 14 10  1:28 node_modules
.rw-r--r--  640 user 14 10  1:28 package.json
drwxr-xr-x    - user 14 10  0:54 src
.rw-r--r--    0 user 14 10  1:29 tsconfig.json
.rw-r--r--  857 user 14 10  0:56 webpack.config.js
.rw-r--r-- 142k user 14 10  1:28 yarn.lock

tsconfig.jsonにtypescriptをes5にコンパイルする設定をカリカリ書いていく。
今回は最初というのもあり、webpackのtypescript導入に記載してあるjsonファイルをそのまま使う。

※ json内でjsxを使っているが今回は使っていない

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "commonjs",
        "sourceMap": true,
        "target": "es5",
        "jsx": "react",
        "allowJs": true
    }
}

webpack.config.js

以下の用にts-loaderを入れてtypescriptをコンパイルできるようにする

const src = __dirname + "/src";
const dist = __dirname + "/dist"

var webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    context: src,
    entry: "./ts/index.ts",
    devtool:"inline-source-map",
    module: {
        rules:[
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test:/\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/
            },
        ]
    },
    resolve: {
        extensions:[".js", ".ts", ".tsx"]
    },
    output: {
        path: dist,
        filename: "bundle.js"
    },
    devServer: {
        contentBase: dist,
        port: 3000
    },
    plugins: [
        new UglifyJSPlugin(),
    ]
};

typescriptファイルの作成

$ touch src/ts/index.ts

console.log("test") //のみを記載

コンパイル

ema-hiro.hatenablog.com

で作ったyarnのscriptの再利用。

$ yarn run build
yarn run v1.1.0
$ yarn run --config webpack
ts-loader: Using typescript@2.5.3 and ~/emahiro/ts_sample/tsconfig.json
Hash: bcac9e140803472acb6d
Version: webpack 3.7.1
Time: 1114ms
     Asset       Size  Chunks             Chunk Names
 bundle.js  498 bytes       0  [emitted]  main
index.html  182 bytes          [emitted]
   [0] ./ts/index.ts 21 bytes {0} [built]
Child html-webpack-plugin for "index.html":
     1 asset
       4 modules
✨  Done in 2.27s.

動作確認する

以前作成したものと同様の設定で webpack-dev-server を起動し localhost:3000 にアクセスする

$ yarn run start // ※ リンクにあるブログで作成済みのコマンド
Project is running at http://localhost:3000/
webpack output is served from /
Content not from webpack is served from ~/emahiro/ts_sample/dist

開発者画面 -> consoleを見て test とlogが記載されていればtypescriptはes5にコンパイルされて正常にブラウザで読み込まれている。

所感

webpack + typescriptは想像以上に導入が簡単。
次は簡単なアプリを作ってみたい。