webpackとbabelの呪い、そしてTypeScriptへようこそ
webpackとbabelはモダンなJavaScriptを書いている人なら知っている、もしくは使ったことがあると思う
ちなみに僕はこの二つが好きではない
理由は言わずもがな、設定ファイルがカオスであり、ドキュメントありでもHello Worldすら満足にHTMLに表示できないからである
この二つが必要なのは結局ES20xxをES5にトランスパイルしないと満足できない人達がいるからだ
だけどwebpackもbabelも正直バカバカしいほど設定が大変で、俺は設定ファイルじゃなくてアプリを作りたいんだよとブチギレることは必至である
というわけで僕はいまTypeScript（tsc）とBrowserifyしか使っていない
正直な話、tscにガッツリ依存する分jsよりtsのほうが開発を始めやすいと思う（flow？知らない子ですね…）
百聞は一見にしかず？
code:tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"sourceMap": true,
"outDir": "dist",
"jsx": "react"
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*.ts",
"src/**/*.tsx"
]
}
とりあえずTypeScriptを始めたい人はこれをコピペすればいいとおもう
src/に*.ts(x)ファイルを作ればそれでおｋ
コンパイルはnpm scriptでやる
code:package.json
{
"scripts": {
"build": "tsc",
"browserify": "browserify ./dist/index.js -o ./public/js/index.js"
},
"devDependencies": {
"typescript": "*",
"browserify": "*"
}
}
必要なのはこれだけ
npm run buildでdist/にjsが生成される。なぜかReactのtsxもちゃんとjsにコンパイルされている
npm run browserifyでブラウザ用の統合jsファイルができる
正直webpackの画像やcssもまとめてビルドするという思想はあまり共感できない
CSSModuleはけっこう絶許感がある
babel-pollyfillも、正直最近のESの新機能は別に…というものばかりなので使わなくていいと思っている
TypeScriptにclassやasync/awaitがあるのでもうそれでいいやとなっている
Object.valuesとかは確かに使えないけど、別にいうほど使わないし、必要だったらlodashを使えばいい
これを読んでnext.jsの良さはwebpack/babelから開放されてReactを使えることだと書いてあってなるほどと思った