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
  1. {
  2. "compilerOptions": {
  3. "outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"
  4. },"include": [
  5. "./src/**/*"
  6. ]
  7. }
  1. // webpack.config.js
  2. const path = require('path');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const webpack = require('webpack');
  5.  
  6.  
  7. module.exports = {
  8. entry: {
  9. index:'./src/index.js',},output: {
  10. filename: 'bundle.js',path: path.resolve(__dirname,'dist')
  11. },devtool: "source-map",// Add '.ts' and '.tsx' as resolvable extensions.
  12. resolve: {
  13. extensions: ['.ts','.tsx','.js','.jsx']
  14. },module: {
  15. rules: [
  16. {
  17. test: /\.css$/,use: ['style-loader','css-loader']
  18. },{
  19. test: /\.(png|svg|jpg|gif)$/,use: ['url-loader']
  20. },{
  21. test: /\.(woff|woff2|eot|ttf|otf)$/,{
  22. test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
  23. loader: 'babel-loader'
  24. }
  25. },// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
  26. {
  27. test: /\.tsx?$/,loader: "awesome-typescript-loader"
  28. },]
  29. },plugins: [
  30. new HtmlWebpackPlugin({
  31. title: 'production',template: './index.html'
  32. }),new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()
  33. ],devServer: {
  34. contentBase: './dist',hot: true
  35. },};

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引入样式,并且相互不冲突。

  1. //demo.less -> demo.less.d.ts
  2. //.demo{color:red;} -> export const demo: string;
  3. import * as styles from 'demo.less'
  4. <DemoComponent className={styles.demo} />
  1. // webpack.config.js
  2. const path = require('path');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const webpack = require('webpack');
  5.  
  6.  
  7. module.exports = {
  8. entry: {
  9. index:'./src/index.js',//add .less
  10. resolve: {
  11. extensions: ['.ts','.jsx','.less','.css']
  12. },//import less modules,name:demo__demo___hash
  13. {
  14. test: /\.less/,use: [
  15. 'style-loader','typings-for-css-modules-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&namedExport&camelCase&less!less-loader'
  16. ]
  17. },{
  18. test: /\.tsx?$/,};

4.引入react-routerv4

npm i -S react-router-dom
  • 创建history
  1. import { createHashHistory } from 'history';
  2. export default createHashHistory();
  • 使用
  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import * as styles from "./index.less";
  4. import history from './helpers/history';
  5. import {Router,Route,Switch,Redirect,Link} from 'react-router-dom';
  6. import Hello from "./router/Hello";
  7. import TodoList from "./router/TodoList";
  8.  
  9.  
  10. const PrivateRoute = ({ component: Component,...rest}) => {
  11. return (
  12. <Route {...rest} render={props => (
  13. <Component {...props}/>
  14. )}/>
  15. );
  16. }
  17.  
  18.  
  19. ReactDom.render(
  20. <Router history={history} >
  21. <div className={styles.wrap}>
  22. <ul>
  23. <li><Link to="/">Homes</Link></li>
  24. <li><Link to="/todo">TodoList</Link></li>
  25. </ul>
  26. <Switch>
  27. <Route exact path="/" component={Hello}/>
  28. {/*<Route path="/demo" component={Demo}/>*/}
  29. <PrivateRoute path="/todo" component={TodoList} />
  30. </Switch>
  31. </div>
  32. </Router>,document.getElementById('root')
  33. );
  • ...ES7语法报错
npm i -S babel-preset-stage-2

修改.babelrc

  1. {
  2. "presets": ["es2015","react","stage-2"],}

5.引入mobx状态管理

npm i -S mobx mobx-react
  • 使用装饰器语法

修改tsconfig.json

  1. "compilerOptions": {
  2. "target":"es2017",//fix mobx.d.ts error
  3. "experimentalDecorators": true,"allowJs": true
  4. }
npm i -D babel-plugin-transform-decorators-legacy

修改.babelrc

  1. {
  2. "presets": ["es2015","plugins": ["transform-decorators-legacy"]
  3. }

源码

Github

猜你在找的React相关文章