webpack + babel + TypeScript + React 環境構築メモ
- init
npm init -y
- Babel
npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript- .babelrc か babel.config.json を作成する(.babelrcはディレクトリ単位、babel.config.jsonはプロジェクト全体)
- webpack
npm i -D webpack webpack-cli babel-loader ts-loader- webpack.config.js
- React、TypeScript
npm i -S react react-domnpm i -D typescript @types/react @types/react-domnpx tsc init- tsconfig.json
- src/index.ts
- webpack-dev-server
npm i -D webpack-dev-server html-webpack-plugin- src/index.html
- package.json
npm start
コマンドの説明
| npm | yarn | |
|---|---|---|
npm init |
yarn init |
package.json を作成 |
npm i -S , npm i, npm install --save , npm install
|
yarn add |
package.json の dependenciesに追加 |
npm i -D , npm install --save-dev
|
yarn add -D |
package.json の devDependenciesに追加 |
babel
.babelrc
{
"presets": [
"@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"
]
}
webpack
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "dist/"),
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: ["ts-loader"],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
devServer: {
contentBase: "./dist",
hot: true,
},
};
React + TypeScript
src/index.tsx
import React from "react";
import { render } from "react-dom";
const App = () => {
return <h1>Hello World! React x TypeScript</h1>;
};
render(<App />, document.getElementById("app"));
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "dist",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
},
"include": ["src"]
}
webpack-dev-server
package.json
{
// 省略
"scripts": {
"start": "webpack serve",
"watch": "webpack --watch",
"build": "webpack --mode production"
},
// 省略
}
npm start
参考
https://tech.playground.style/javascript/babel-webpack/
https://tech.playground.style/javascript/babel-webpack-build/