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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
Javascript实现的分页函数
2006/12/22 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python递归计算N!的方法
2015/05/05 Python
浅析Python中signal包的使用
2015/11/13 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
学生励志演讲稿
2014/01/06 职场文书
报关报检委托书
2014/04/08 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
银行委托书范本
2014/09/28 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
自主招生英文自荐信
2015/03/25 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android