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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
js更优雅的兼容
Aug 12 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
js实现新年倒计时效果
Dec 10 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 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 作用域解析运算符(::)
2010/07/27 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python使用Matplotlib画饼图
2018/09/25 Python
python开发游戏的前期准备
2019/05/05 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
大家检讨书5000字
2014/02/03 职场文书
模范家庭事迹材料
2014/02/10 职场文书
五水共治一句话承诺
2014/05/30 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
三下乡活动心得体会
2016/01/23 职场文书
MySQL触发器的使用
2021/05/24 MySQL
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Python办公自动化PPT批量转换操作
2021/09/15 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis