React全家桶环境搭建代码解析

这次给大家带来React全家桶环境搭建代码解析，React全家桶环境搭建的注意事项有哪些，下面就是实战案例，一起来看一下。

环境搭建

1.从零开始搭建webpack+react开发环境

2.引入Typescript

安装依赖

npm i -S @types/react @types/react-domnpm 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.jsconst 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-loadernpm 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.jsconst 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 (     (          )}/>  );}ReactDom.render(      
      
        
Homes
        
TodoList
      
                      {/**/}                  
  ,  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全家桶环境搭建代码解析的详细内容，更多请关注【创想鸟】其它相关文章！