Cette fois, je vais vous apporter l'analyse du code pour créer l'environnement du bucket de la famille React. Quelles sont les précautions pour construire l'environnement du bucket de la famille React ?
Configuration de l'environnement
1. Créer un environnement de développement webpack+react à partir de zéro
2.
Installer les dépendancesnpm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "include": [ "./src/**/*" ] }
// 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 }, };
npm i -D less less-loader npm i -D typings-for-css-modules-loader
//demo.less -> demo.less.d.ts //.demo{color:red;} -> export const demo: string; import * as styles from 'demo.less' <DemoComponent className={styles.demo} />
// 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 }, };
npm i -S react-router-dom
import { createHashHistory } from 'history'; export default createHashHistory();
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') );
npm i -S babel-preset-stage-2
{ "presets": ["es2015", "react", "stage-2"], }
npm i -S mobx mobx-react
"compilerOptions": { "target":"es2017", //fix mobx.d.ts error "experimentalDecorators": true, "allowJs": true }
npm i -D babel-plugin-transform-decorators-legacy
{ "presets": ["es2015", "react", "stage-2"], "plugins": ["transform-decorators-legacy"] }
Explication détaillée des étapes de JS appelant la fonction de caméra locale
Étapes JS pour implémenter json tableau d'objets tri par attributs d'objet Explication détaillée
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!