这次给大家带来react全家桶环境搭建代码解析，react全家桶环境搭建的注意事项有哪些，下面就是实战案例，一起来看一下。
环境搭建
1.从零开始搭建webpack+react开发环境
2.引入typescript
安装依赖
npm i -s @types/react @types/react-dom
npm i -d typescript awesome-typescript-loader source-map-loader
新建tsconfig.json
{
compileroptions: {
outdir: ./dist/,
sourcemap: true,
noimplicitany: true,
module: commonjs,
target: es5,
jsx: react
},
include: [
./src/**/*
]
}
修改webpack.config.js
// 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
},
};
3.引入less并支持import less modules
安装依赖
npm i -d less less-loader
npm i -d typings-for-css-modules-loader
tips:typings-for-css-modules-loader
打包时将样式模块化，我们可以通过import或require引入样式，并且相互不冲突。
//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
// 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
},
};
4.引入react-routerv4
npm i -s react-router-dom
创建history
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')
);
...es7语法报错
npm i -s babel-preset-stage-2
修改.babelrc
{
presets: [es2015, react, stage-2],
}
5.引入mobx状态管理
npm i -s mobx mobx-react
使用装饰器语法
修改tsconfig.json
compileroptions: {
target:es2017, //fix mobx.d.ts error
experimentaldecorators: true,
allowjs: true
}
npm i -d babel-plugin-transform-decorators-legacy
修改.babelrc
{
presets: [es2015, react, stage-2],
plugins: [transform-decorators-legacy]
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js调用本地摄像头功能步骤详解
js实现json对象数组按对象属性排序步骤详解
以上就是react全家桶环境搭建代码解析的详细内容。