webpack+TypeScript+React
任意のフォルダを作成、フォルダに空({})のpackage.jsonファイルを作成する。
1. webpackとTypeScriptをインストールする。
npm i -D webpack webpack-cli typescript ts-loader
2. 「react」「react-dom」モジュールをインストールする。
npm i -S react react-dom @types/react @types/react-dom
package.jsonが次のようになる。
{
"devDependencies": {
"ts-loader": "^5.4.3",
"typescript": "^3.4.4",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
},
"dependencies": {
"@types/react": "^16.8.14",
"@types/react-dom": "^16.8.4",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"private": true
}
3. package.jsonにビルドコマンドを追加する。
{
"scripts": {
"build": "tsc && webpack",
"watch": "webpack -w",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
...
}
4. TypeScriptの設定ファイル: tsconfig.jsonを作成する。
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "es2015",
"jsx": "react",
"moduleResolution": "node",
"lib": ["es2020", "dom"],
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"preserveSymlinks": true
}
}
5. webpackの設定ファイル:webpack.config.jsを作成する。
module.exports = {
// モード値を production に設定すると最適化された状態で、
// development に設定するとソースマップ有効でJSファイルが出力される
mode: "development",
// メインとなるJavaScriptファイル(エントリーポイント)
entry: {
"main": ["./src/main.tsx"]
},
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: `${__dirname}/dist`,
// 出力ファイル名
filename: "[name].js"
},
module: {
rules: [
{
// 拡張子 .ts もしくは .tsx の場合
test: /\.tsx?$/,
// TypeScript をコンパイルする
use: "ts-loader"
}
]
},
// import 文で .ts や .tsx ファイルを解決するため
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
devtool:'source-map'
};
main.tsx、App.tsxを作成後、「npm run build」コマンドを実行すると、distの下にmain.jsが出力される。
./src/main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
./src/App.tsx
import * as React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello React!</h1>
</div>
);
}
}
export default App;
index.htmlにmain.jsを導入することで、「Hello React!」が表示される。
index.html
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>