Dieses Mal werde ich Ihnen die Codeanalyse für den Aufbau der React-Familien-Bucket-Umgebung vorstellen. Was sind die Vorsichtsmaßnahmen für den Aufbau der React-Familien-Bucket-Umgebung?
Umgebungseinrichtung
1. Erstellen Sie eine Webpack+React-Entwicklungsumgebung von Grund auf
2. Führen Sie Typescript ein
Abhängigkeiten installieren
npm i -S @types/react @types/react-dom
npm i -D typescript awesome-typescript-loader source-map-loader
Nach dem Login kopieren
Neue tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}Nach dem Login kopieren
webpack.config.js ändern
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
index:'./src/index.js',
},
output: {
filename: 'bundle.js',
path: path.resolve(dirname, 'dist')
},
devtool: "source-map",
// Add '.ts' and '.tsx' as resolvable extensions.
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template: './index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
},
};Nach dem Login kopieren
3. Weniger Module einführen und den Import weniger Module unterstützen
Abhängigkeiten installieren
npm i -D less less-loader
npm i -D typings-for-css-modules-loader
Nach dem Login kopieren
Tipps: typings-for-css-modules-loader
Modularisieren Sie den Stilbeim Packen, wir können den Stil durch Import oder Require einführen und Konflikten Sie nicht miteinander.
//demo.less -> demo.less.d.ts
//.demo{color:red;} -> export const demo: string;
import * as styles from 'demo.less'
<DemoComponent className={styles.demo} />Nach dem Login kopieren
webpack.config.js ändern
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
index:'./src/index.js',
},
output: {
filename: 'bundle.js',
path: path.resolve(dirname, 'dist')
},
devtool: "source-map",
//add .less
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.less', '.css']
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//import less modules，name：demodemo_hash
{
test: /\.less/,
use: [
'style-loader',
'typings-for-css-modules-loader?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]&namedExport&camelCase&less!less-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template: './index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
},
};Nach dem Login kopieren
4. React-routerv4 einführen
npm i -S react-router-dom
Nach dem Login kopieren
Verlauf erstellen
import { createHashHistory } from 'history';
export default createHashHistory();Nach dem Login kopieren
Verwenden Sie
import React from 'react';
import ReactDom from 'react-dom';
import * as styles from "./index.less";
import history from './helpers/history';
import {Router, Route, Switch, Redirect, Link} from 'react-router-dom';
import Hello from "./router/Hello";
import TodoList from "./router/TodoList";
const PrivateRoute = ({ component: Component , ...rest}) => {
return (
<Route {...rest} render={props => (
<Component {...props}/>
)}/>
);
}
ReactDom.render(
<Router history={history} >
<p className={styles.wrap}>
<ul>
<li><Link to="/">Homes</Link></li>
<li><Link to="/todo">TodoList</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Hello}/>
{/*<Route path="/demo" component={Demo}/>*/}
<PrivateRoute path="/todo" component={TodoList} />
</Switch>
</p>
</Router>,
document.getElementById('root')
);Nach dem Login kopieren
...ES7-Syntaxfehler
npm i -S babel-preset-stage-2
Nach dem Login kopieren
Ändern Sie .babelrc
{
"presets": ["es2015", "react", "stage-2"],
}Nach dem Login kopieren
5. Führen Sie die Mobx-Statusverwaltung ein
npm i -S mobx mobx-react
Nach dem Login kopieren
Verwenden Sie Decorator-Syntax
Ändern Sie tsconfig.json
"compilerOptions": {
"target":"es2017", //fix mobx.d.ts error
"experimentalDecorators": true,
"allowJs": true
}Nach dem Login kopieren
npm i -D babel-plugin-transform-decorators-legacy
Nach dem Login kopieren
Ändern Sie .babelrc
{
"presets": ["es2015", "react", "stage-2"],
"plugins": ["transform-decorators-legacy"]
}Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte des JS-Aufrufs der lokalen Kamerafunktion
JS-Schritte zur Implementierung von JSON Sortierung des Objektarrays nach Objektattributen Ausführliche Erklärung
Das obige ist der detaillierte Inhalt vonReagieren Sie auf die Analyse des Konstruktionscodes der Familien-Bucket-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
