React全家桶环境搭建过程详解

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')

},

dQUspNcrgevtool: "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'

修改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

创建history

import { createHashHistory } from 'history';

export default createHashHistory();

使用

import React fhttp://rom '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 "./routhttp://er/Hello";

import TodoList from "./router/TodoList";

const PrivateRoute = ({ component: Component , ...rest}) => {

return (

(

)}/>

);

}

ReactDom.render(

{/**/}

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"]

}

源码

github

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。