react+webpack 4+typescript構築プロジェクト
8311 ワード
react+webpack 4+typescript構築プロジェクト
会社のプロジェクトはvueフレームワークからreactに移行するつもりなので、webpack 4でreact+typescriptを構築する方法を独学で学びました.スクリプトフレームcreate-react-appが直接構築されているとはいえ、会社の大物も自分で自分のスクリプトフレームをパッケージしていますが、ここでは0から1までの自分で構築して勉強したいと思っています(初心者の学習に適しています):
一:まず最新のwebpackをインストールする
ここではwebpack-cliをインストールする必要があります(これはwebpack 4.+です.ここでは詳しく説明しません.興味のある人はwebpack公式サイトで勉強することができます.https://webpack.docschina.org/)
次にreactと関連する依存react,react-domをインストールします.
この时、私达はすでにこの装の依存するすべて(简単版)を装备して、次に関连する配置を书きます
コマンドラインで入力:
typescriptのプロファイルを生成する:tsconfig.json、ここで簡単な変更を行います
次にsrcディレクトリを作成し、srcディレクトリの下にcomponentsディレクトリを作成し、ファイルを作成します. src/index.tsxおよびsrc/components/Ant.tsx index.tsxコードは次のとおりです.
Ant.tsxコードは次のとおりです.
次に、ルートディレクトリの下にwebpack.config.jsとindex.htmlを作成します.
Webpack.config.jsは以下のように構成されています.
index.htmlコードは次のとおりです.
次にwebpack-dev-serverを直接実行し、ブラウザでlocalhost:8080に直接アクセスします.ここではリアルタイム更新が構成されています.簡単版のgithubにアップロードしました https://github.com/YDMua/react_webpack4_ts
興味のある人はreact-router、reduxなどのファミリーバケツを自分で配置することができます.
会社のプロジェクトはvueフレームワークからreactに移行するつもりなので、webpack 4でreact+typescriptを構築する方法を独学で学びました.スクリプトフレームcreate-react-appが直接構築されているとはいえ、会社の大物も自分で自分のスクリプトフレームをパッケージしていますが、ここでは0から1までの自分で構築して勉強したいと思っています(初心者の学習に適しています):
一:まず最新のwebpackをインストールする
npm install -D webpackここではwebpack-cliをインストールする必要があります(これはwebpack 4.+です.ここでは詳しく説明しません.興味のある人はwebpack公式サイトで勉強することができます.https://webpack.docschina.org/)
npm install -D webpack-cli次にreactと関連する依存react,react-domをインストールします.
npm install --save-dev react react-dom @types/react @types/react-dom
npm install --save-dev ts-loader
npm link typescript
npm install --save-dev webpack-dev-server
npm install -D "babel-loader@^8.0.0-beta" @babel/core @babel/preset-react
この时、私达はすでにこの装の依存するすべて(简単版)を装备して、次に関连する配置を书きます
コマンドラインで入力:
tsc --inittypescriptのプロファイルを生成する:tsconfig.json、ここで簡単な変更を行います
{
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
}
}
次にsrcディレクトリを作成し、srcディレクトリの下にcomponentsディレクトリを作成し、ファイルを作成します.
import * as React from "react"
import * as ReactDOM from "react-dom"
import { Ant } from "./components/Ant"
ReactDOM.render(
"EDong" company="ydj" />,
document.getElementById("app")
)
Ant.tsxコードは次のとおりです.
import * as React from "react"
export interface AntProps {
name: string
company: string
}
export class Ant extends React.Component<AntProps, {}> {
render() {
return (
Hello, I am {this.props.name}, I in {this.props.company} now!
)
}
}
次に、ルートディレクトリの下にwebpack.config.jsとindex.htmlを作成します.
Webpack.config.jsは以下のように構成されています.
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
//
entry: "./src/index.tsx",
output: {
//
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
//
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: ' ',
template: './index.html',
})
],
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties']
}
},
{
test: /\.tsx?$/,
use: ['ts-loader']
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
},
// sourceMap
devtool: "source-map",
}index.htmlコードは次のとおりです.
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Anttitle>
head>
<body>
<div id="app">div>
body>
html>次にwebpack-dev-serverを直接実行し、ブラウザでlocalhost:8080に直接アクセスします.ここではリアルタイム更新が構成されています.簡単版のgithubにアップロードしました
興味のある人はreact-router、reduxなどのファミリーバケツを自分で配置することができます.