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


Posted in Javascript onMay 18, 2018

本文介绍了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')
  },
  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

打包时将样式模块化,我们可以通过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

创建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语法报错

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
vue单页开发父子组件传值思路详解
May 18 #Javascript
Node.js Buffer用法解读
May 18 #Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 #Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 #Javascript
webpack4 css打包压缩问题的解决
May 18 #Javascript
微信小程序实现长按删除图片的示例
May 18 #Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 #Javascript
You might like
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
几个高效,简洁的字符处理函数
2007/04/12 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
如何执行一个shell程序
2012/11/23 面试题
历史学专业推荐信
2013/11/06 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
护理目标管理责任书
2014/07/25 职场文书
秦兵马俑导游词
2015/02/02 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python