Dieses Mal zeige ich Ihnen, wie Sie eine React-Familien-Bucket-Umgebung aufbauen und welche Vorsichtsmaßnahmen für den Aufbau einer React-Familien-Bucket-Umgebung gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.
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:
So verwenden Sie JS, um die Sortierung von JSON-Objektarrays nach Objekteigenschaften zu implementieren
So bedienen Sie vue .js 3DES-Verschlüsselung
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine React-Familien-Bucket-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
