開発手順 †
- [プロジェクトフォルダ]/tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
- [プロジェクトフォルダ]/webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// webpackの出力をデバッグするためのsourcemapsを有効化
devtool: "source-map",
resolve: {
// 解決可能な拡張子に'.ts'と'.tsx'を追加
extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// '.ts'または'.tsx'の全てのファイルを、'awesome-typescript-loader'で扱う
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
],
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
}
],
},
// インポートしたモジュールのパスが下記のいずれかにマッチする場合、
// それに相当するグローバル変数が存在するものとしてそれを使用します。
// 依存性の全てを扱うことを避けることができるようになり、
// ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
|