webpackとbabelの呪い、そしてTypeScriptへようこそ
webpackとbabelはモダンなJavaScriptを書いている人なら知っている、もしくは使ったことがあると思う
ちなみに僕はこの二つが好きではない
理由は言わずもがな、設定ファイルがカオスであり、ドキュメントありでもHello Worldすら満足にHTMLに表示できないからである
この二つが必要なのは結局ES20xxをES5にトランスパイルしないと満足できない人達がいるからだ
だけどwebpackもbabelも正直バカバカしいほど設定が大変で、俺は設定ファイルじゃなくてアプリを作りたいんだよとブチギレることは必至である
というわけで僕はいまTypeScript（ tsc ）とBrowserifyしか使っていない
正直な話、tscにガッツリ依存する分jsよりtsのほうが開発を始めやすいと思う（flow？知らない子ですね…）
百聞は一見にしかず？
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でやる
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を使えることだと書いてあってなるほどと思った