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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
php 修改密码实现代码
May 24 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
javascript获取元素的计算样式
May 24 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
JS命名空间的另一种实现
2013/08/09 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python如何读写csv数据
2018/03/21 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python实现接口并发测试脚本
2019/06/25 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python模拟实现分发扑克牌
2020/04/22 Python
详解python logging日志传输
2020/07/01 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
活动志愿者自荐信
2014/01/27 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
护理自荐信
2019/05/14 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
Vue router配置与使用分析讲解
2022/12/24 Vue.js