React全家桶环境搭建过程详解
本文介绍了React全家桶环境搭建过程详解，分享给大家，具体如下：
环境搭建
1.从零开始搭建webpack+react开发环境
2.引入Typescript
安装依赖
npmi-S@types/react@types/react-dom npmi-Dtypescriptawesome-typescript-loadersource-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
constpath=require('path');
constHtmlWebpackPlugin=require('html-webpack-plugin');
constwebpack=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'asresolvableextensions.
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'
}
},
//Allfileswitha'.ts'or'.tsx'extensionwillbehandledby'awesome-typescript-loader'.
{
test:/\.tsx?$/,
loader:"awesome-typescript-loader"
},
]
},
plugins:[
newHtmlWebpackPlugin({
title:'production',
template:'./index.html'
}),
newwebpack.NamedModulesPlugin(),
newwebpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',
hot:true
},
};
3.引入less并支持importlessmodules
安装依赖
npmi-Dlessless-loader npmi-Dtypings-for-css-modules-loader
tips:typings-for-css-modules-loader
打包时将样式模块化，我们可以通过import或require引入样式，并且相互不冲突。
//demo.less->demo.less.d.ts
//.demo{color:red;}->exportconstdemo:string;
import*asstylesfrom'demo.less'
修改webpack.config.js
//webpack.config.js
constpath=require('path');
constHtmlWebpackPlugin=require('html-webpack-plugin');
constwebpack=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']
},
//importlessmodules，name：demo__demo___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:[
newHtmlWebpackPlugin({
title:'production',
template:'./index.html'
}),
newwebpack.NamedModulesPlugin(),
newwebpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',
hot:true
},
};
4.引入react-routerv4
npmi-Sreact-router-dom
创建history
import{createHashHistory}from'history';
exportdefaultcreateHashHistory();
使用
importReactfrom'react';
importReactDomfrom'react-dom';
import*asstylesfrom"./index.less";
importhistoryfrom'./helpers/history';
import{Router,Route,Switch,Redirect,Link}from'react-router-dom';
importHellofrom"./router/Hello";
importTodoListfrom"./router/TodoList";
constPrivateRoute=({component:Component,...rest})=>{
return(
(
Homes TodoList
{/**/}
...ES7语法报错
npmi-Sbabel-preset-stage-2
修改.babelrc
{
"presets":["es2015","react","stage-2"],
}
5.引入mobx状态管理
npmi-Smobxmobx-react
使用装饰器语法
修改tsconfig.json
"compilerOptions":{
"target":"es2017",//fixmobx.d.tserror
"experimentalDecorators":true,
"allowJs":true
}
npmi-Dbabel-plugin-transform-decorators-legacy
修改.babelrc
{
"presets":["es2015","react","stage-2"],
"plugins":["transform-decorators-legacy"]
}
源码
Github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。