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

 更新时间:2018年05月18日 11:28:11   作者:Zysoft   我要评论
本篇文章主要介绍了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

{
  "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中UMD规范的代码推演

    javascript中UMD规范的代码推演

    这篇文章给大家分享了javascript中UMD规范的代码推演的相关的知识点内容,有兴趣的朋友们学习下。
    2018-08-08
  • 微信 jssdk 签名错误invalid signature的解决方法

    微信 jssdk 签名错误invalid signature的解决方法

    这篇文章主要介绍了微信 jssdk 签名错误invalid signature的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JavaScript flash复制库类 Zero Clipboard

    JavaScript flash复制库类 Zero Clipboard

    开发中经常会用到复制的功能,在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。
    2011-01-01
  • 浅析javascript中的DOM

    浅析javascript中的DOM

    本文主要给大家简单介绍了是什么是DOM、动态操作DOM元素的方法、使用jsjs操作样式以及Form对象的简介,是个人对于javascript中的DOM的理解的总结,推荐给小伙伴们。
    2015-03-03
  • json对象与数组以及转换成js对象的简单实现方法

    json对象与数组以及转换成js对象的简单实现方法

    下面小编就为大家带来一篇json对象与数组以及转换成js对象的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js创建子窗口并且回传值示例代码

    js创建子窗口并且回传值示例代码

    本文为大家详细介绍喜爱使用js创建子窗口并且实现回传值的示例,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 深入理解JS DOM事件机制

    深入理解JS DOM事件机制

    下面小编就为大家带来一篇深入理解JS DOM事件机制。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 深入浅析JavaScript中的Function类型

    深入浅析JavaScript中的Function类型

    Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念。这篇文章主要介绍了JavaScript中的Function类型的相关资料,一起看下吧
    2016-07-07
  • 关于scrollLeft,scrollTop的浏览器兼容性测试

    关于scrollLeft,scrollTop的浏览器兼容性测试

    弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样,接下来介绍下scrollLeft,scrollTop的浏览器兼容性,感兴趣的你可以参考下哈
    2013-03-03
  • javascript实现控制浏览器全屏

    javascript实现控制浏览器全屏

    这篇文章主要介绍了javascript实现控制浏览器全屏的代码分享给大家,十分的实用,有需要的小伙伴可以参考下。
    2015-03-03

最新评论