- Initialize project.
npm init -y
- create folder src and build.
- Add files index.html file into the src folder.
- Add dependency
npm install react react-dom
- Add dev dependency
npm install --save-dev typescript @types/react
@types/react-dom @babel/core @babel/preset-env
@babel/preset-react @babel/preset-typescript
@babel/plugin-transform-runtime @babel/runtime
eslint eslint-plugin-react eslint-plugin-react-hooks
@typescript-eslint/parser @typescript-eslint/eslint-plugin
webpack webpack-cli webpack-dev-server
@types/webpack-dev-server babel-loader html-webpack-plugin
ts-node fork-ts-checker-webpack-plugin
@types/fork-ts-checker-webpack-plugin eslint-webpack-plugin
clean-webpack-plugin
- Add tsconfig.json in root folder
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}
- Add index.tsx file in the src folder
import React from "react";
import ReactDOM from "react-dom";
const App = () => (
<h1>My React and TypeScript App!</h1>
);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
- Add .babelrc in root folder
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
- Add .eslintrc.json in root folder
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"react-hooks"
],
"extends": [
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": "off"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
}
}
- Add webpack.dev.config.ts in root folder
import path from "path";
import { Configuration, HotModuleReplacementPlugin } from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import ESLintPlugin from "eslint-webpack-plugin";
const config: Configuration = {
mode: "development",
output: {
publicPath: "/",
},
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
}),
new ForkTsCheckerWebpackPlugin({
async: false
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
}),
new HotModuleReplacementPlugin(),
],
devtool: "inline-source-map",
devServer: {
static: path.join(__dirname, "build"),
historyApiFallback: true,
port: 4000,
open: true,
hot: true
},
};
export default config;
- Add webpack.prod.config.ts in root folder
import path from "path";
import { Configuration } from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import ESLintPlugin from "eslint-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
const config: Configuration = {
mode: "production",
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].[contenthash].js",
publicPath: "",
},
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
}),
new ForkTsCheckerWebpackPlugin({
async: false,
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
}),
new CleanWebpackPlugin(),
],
};
export default config;
- Update package.json
"scripts": {
"start": "webpack serve --config webpack.dev.config.ts",
"build": "webpack --config webpack.prod.config.ts",
},
Top comments (0)