React全家桶環(huán)境搭建過(guò)程詳解
更新時(shí)間：2018年05月18日 11:28:11 作者：Zysoft
本篇文章主要介紹了React全家桶環(huán)境搭建過(guò)程詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了React全家桶環(huán)境搭建過(guò)程詳解，分享給大家，具體如下：
環(huán)境搭建
1.從零開(kāi)始搭建webpack+react開(kāi)發(fā)環(huán)境
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
打包時(shí)將樣式模塊化，我們可以通過(guò)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：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: [
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
創(chuàng)建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} >
<div 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>
</div>
</Router>,
document.getElementById('root')
);
...ES7語(yǔ)法報(bào)錯(cuò)
npm i -S babel-preset-stage-2
修改.babelrc
{
"presets": ["es2015", "react", "stage-2"],
}
5.引入mobx狀態(tài)管理
npm i -S mobx mobx-react
使用裝飾器語(yǔ)法
修改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"]
}
源碼
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼
本篇文章主要介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了Ant Design中使用css切換的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了詳解react如何在組件中獲取路由參數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
React中實(shí)現(xiàn)組件通信的幾種方式小結(jié)
在構(gòu)建復(fù)雜的React應(yīng)用時(shí),組件之間的通信是至關(guān)重要的,從簡(jiǎn)單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認(rèn)識(shí)react組件通信的幾種方式,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了React優(yōu)化子組件render的使用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
下面小編就為大家?guī)?lái)一篇基于react組件之間的參數(shù)傳遞(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
React.memo函數(shù)中的參數(shù)示例詳解
這篇文章主要為大家介紹了React.memo函數(shù)中的參數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09