TypescriptでReactのプロジェクトを作ってみた
公式の手順に従いプロジェクト作成
公式の手順に従ってTypescriptでReactのプロジェクトを作成してみたいと思います。
まずプロジェクトルートのディレクトリをさくせしnpm initを実行します。
それからwebpackをグローバルインストールします。
npm install -g webpack
次に必要になるモジュールをインストールします。
npm install --save react react-dom @types/react @types/react-dom npm install --save-dev typescript awesome-typescript-loader source-map-loader
次にプロジェクトルートに以下の"tsconfig.json"を作成します。
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
それから"src/components/Hello.tsx"を作成します。
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
次に"src/index.tsx"を作成します。
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
次に"index.html"を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
ビルドの設定に必要になる"webpack.config.js"を作成します。
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM",
}
};
ここまで出来たらプロジェクトルートで以下のwebpackコマンドを実行したらdistにビルドしたものが出力されます。
webpack
動きを確認する場合はプロジェクトルートで以下のコマンドを実行しプロジェクトのルートをドキュメントルートとした上でサーバを起動した上で"http://8000/index.html"にアクセスすることで確認できます。
python -m SimpleHTTPServer
vue-cliからプロジェクト作成
vue-cliのインストール
npm install -g vue-cli
プロジェクト作成
vue init webpack react_typescript_starter_project cd react_typescript_starter_project npm install
一旦起動してみる
プロジェクト作成直後はvueのプロジェクトになっておりますが、とりあえず以下のコマンドでwebpackを起動して動作を確認してみたいと思います。
npm run dev
上記コマンド実行後にブラウザが開いてvue-jsのアイコンが表示された画面が表示されたかと思います。
vue-cliで作成したプロジェクトをreact化する
それではreactで開発できるようにしていきたいと思います。まずは必要なモジュールをインストールします
npm install --save react react-dom @types/react @types/react-dom npm install --save react-redux redux @types/react-redux @types/redux npm install --save-dev typescript awesome-typescript-loader source-map-loader
tsconfig.jsonを作ります。
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
“build/webpack.base.conf.js"にTypescriptの情報も追加します。
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
//app: './src/main.js'
app: './src/index.tsx'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},/*
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},*/
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
それから"src/components/Hello.tsx"を以下の内容で作成します。
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!!</h1>;
次に"src/index.tsx"を作成します。
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
最後に"index.html"を以下の内容で作成したら完成です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
</body>
</html>
これで"npm run dev"を実行すると実際に動いているのが確認できると思います。それから"npm run build"を行った後にdistディレクトリで"python -m SimpleHTTPServer"を実行してみるとビルドがうまくいくことも確認できます。webpackの設定周り詳しくなくてもこれならなんとかなりそうな気がします。
今回vue-cliで作成したプロジェクトは以下にあげておきました。 https://github.com/teruuuuuu/react_typescript_starter_project
