react+webpack+redux+router+ant 构架react开发环境(1)

需要安装的软件

  node.js

  npm

推荐使用使用[email protected]以上的版本,因为6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm,因为伟大的墙,所以介意大家更换镜像,

安装完毕之后,打开终端(mac)window电脑因该是cmd,输入命令 node -v 会看到当前的node版本号,

就说明安装成功了,可以下面的步骤了。

构建项目

  • 新建一个文件夹
  • 使用webstorm编辑该文件夹,之后打开控制台,输入  npm init 来生成一个 package.json 的文件夹(一路回车就OK了,最后输入 yes ,不过介意在回车之前去官网看看基本的流程)

 

现在就可以看到我们的项目大概情况了,里面多了一个 package.json ,这就是刚才  npm init  生成的,将来团队内部的成员只需要这一个文件在install就ok了。

安装webpack

  • 全局安装                    npm install webpack -g
  • 局部安装到开发环境     npm install webpack --save-dev
  • 局部安装到生产环境     npm install webpack --save

这三个环境的具体定义,可以自行查询。

接下来需要安装 babel(转码)、react、react-dom、eslint (语法检测),这里我就不一一说安装的方法了,直接将配置贴出来,大家直接  install

"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "eslint": "^4.4.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.7.0",
    "html-webpack-plugin": "^2.30.1",
    "prop-types": "^15.5.10",
    "react-router": "^3.0.0",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "key-mirror": "^1.0.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "redux": "^3.2.1"
  }

webpack配置

  • 在当前目录下新建一个webpack.config.js

具体解释一下 webpack 配置的一些基本思路,我会直接写好一份配置粘贴出来,不懂webpack的同学可以看看下面的注释

 1 var path = require(‘path‘);  //引用node的path模块
 2 var webpack = require(‘webpack‘); //加载webpack
 3 var HtmlwebpackPlugin = require(‘html-webpack-plugin‘); //加载html-webpack-plugin 功能是生成一个html文件,(我用来做我程序的入口文件)
 4
 5
 6 /**
 7  *  __dirname      node全局变量  存储的是文件所在的文件目录
 8  *  __filename     node全局变量  存储的是文件名
 9  *  path.resolve   将一个字符串解析到一个绝对路径里。
10  */
11
12 //常用路径
13 var ROOT_PATH = path.resolve(__dirname); //获取当前文件路径
14 var APP_PATH = path.resolve(ROOT_PATH, ‘entry‘); //获取文件入口脚本的路径
15 var BUILD_PATH = path.resolve(ROOT_PATH, ‘build‘); //获取打包文件的输入位置
16
17
18 module.exports = {
19     entry: {
20         app: path.resolve(APP_PATH, ‘index.js‘)  //规定webpack在 APP_PATH 的idnex.js 文件开始打包
21     },
22     output: {
23         path: BUILD_PATH,  //输出到那个文件夹
24         filename: "bundle.js" //输出到该文件夹的某个文件
25     },
26     devtool: ‘eval-source-map‘,  //用来调试 因为你在线上跑的是压缩过的代码,看不到具体错误,这个方法是让源代码和压缩代码产生映射,方便快速的定位到指定你的文件,
27
28     devServer: {  //可以开启一个本地web服务器
29         historyApiFallback: true,
30         hot: true,
31         inline: true,
32         port: 8081
33     },
34
35     module: {
36         loaders: [ //webpack的特色加载器
37             {
38                 test: /\.jsx?$/,
39                 loaders: [‘babel-loader‘],
40                 include: [APP_PATH,STORE_PATH,SRC_PATH]
41             }
42         ]
43     },
44     plugins: [  //webpack的特色插件
45         new HtmlwebpackPlugin({
46             title: ‘my First React‘
47         })
48     ],
49     resolve: {  // 配置一些规则,提升解析速度
50         extensions: [‘.js‘, ‘.jsx‘]
51     }
52
53 };

编写react入口文件

·新建文件夹和文件(要和你webpack的配置保持一致)

·index.js 里面写入

 1 import React, {Component} from ‘react‘;
 2 import ReactDom from ‘react-dom‘;
 3
 4
 5 class App extends Component {
 6     constructor(props) {
 7         super(props);
 8     }
 9
10     render() {
11
12         return (
13             <div className="container">
14                 <h1>Hello React</h1>
15
16             </div>
17         )
18     }
19 }
20
21 console.log("你好,hello");
22 const app = document.createElement(‘div‘);
23 document.body.appendChild(app);
24 ReactDom.render(<App/>, app);

之后在  package.json 的script 里配置

1 "scripts": {
2     "test": "echo \"Error: no test specified\" && exit 1",
3     "build": "webpack",
4     "dev": "webpack-dev-server --hot"
5   },

打开控制台 输入  npm run dev

说明编译成功了,

打开浏览器输入  localhost:8081 可以看到

就说明搭建成功了,今天先讲到这里,后面会给大家详细解释 router的添加过程。

 

时间: 2024-11-05 13:36:20

react+webpack+redux+router+ant 构架react开发环境(1)的相关文章

react看这篇就够了(react+webpack+redux+reactRouter+sass)

本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fetch使用: 7.项目目录结构: 一.webpack配置,代码如下: 1.在根目录下新建一个webpack.config.js,这个为开发环境的webpack配置:因为得区分开发跟生产环境,所以还得新建一个webpack.production.config.js作为生产环境使用的配置文档, webp

使用Ant搭建Android开发环境入门

使用Ant搭建Android开发环境入门 使用Ant搭建Android开发环境,建立android项目 配置Ant环境 下载Ant:http://ant.apache.org/bindownload.cgi 在windows上应该选择zip压缩包,将zip压缩包解压到一个目录. 打开系统环境变量,在系统变量栏点击新建,变量名输入“ANT_HOME”,变量值为Ant的根目录,如“D:\Android\apache-ant-1.9.0”,注意不要带双引号. 在系统变量中找到Path变量,点击编辑,在

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

001-使用idea开发环境安装部署

一.概述 参看官方文档:https://ant.design/docs/spec/introduce-cn 其中包含了设计价值观.设计原则.视觉.模式.可视化.动态等. 其中Ant Design 的 React 实现,开发和服务于企业级后台产品.参看文档:https://ant.design/docs/react/introduce-cn 二.安装环境 配置ant design的开发环境,也相当于配置react配置.以下主要使用idea配置开发环境. 2.1.nodejs 下载地址:http:/

使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......)

 create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板 1:首先在webstorm中新建一个项目 2:倘若不是最新版本的npm   ,   安装最新版本npm     npm install npm @latest 3: 安装项目中常用的相关的配置 yarn add react-redux redux redux-thunk react-router-dom thunk [email protect

redux 介绍及配合 react开发

前言 本文是 Redux 及 Redux 配合 React 开发的教程,主要翻译自 Leveling Up with React: Redux,并参考了 Redux 的文档及一些博文,相对译文原文内容有增减修改. 目录 前言 目录 什么是 Redux,为什么使用 Redux Redux 的三大基本原则 1.唯一数据源 2.State 是只读的 3.使用纯函数来执行修改 第一个 Redux Store 不要改变原 State , 复制它 复合 Reducer Dispatch 之后哪个 Reduc

搭建 webpack + React 开发环境

说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考. 正文开始 我就假装大家都是装了node的情况下. 1.进入项目目录,运行`npm init`按照步骤填写最终生成`package.json`文件,所有使用 npm 做依赖管理的项目,根目录下都会有一个这个文件,该文件描述了项目的基本信息以及一些第三方依赖项(插件).详细的使用说明可查阅[官网文档

从零开始搭建webpack+react开发环境

环境主要依赖版本 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] webpack安装及配置 1. 起步 新建项目目录,初始化npm,新建开发源目录 mkdir webpack-react && cd webpack-react npm init -y mkdir src 2.webpack

Webpack笔记(二)——搭建React开发环境

前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一下昨天发布的笔记:入门webpack笔记 一.初始化项目文件夹 在任意目录下,新建一个文件夹作为你的项目文件夹,命名随意.随后使用命令行工具,切换到该文件夹,键入npm init进行初始化(遇到的问题一直回车就好了),初始化完成之后可以看到生成了一个package.json文件. 随后在该项目文件夹