es6+react环境搭建
工具说明
- Node
- Koa
- React
- Webpack
项目结构
- build 客户端代码的构建文件目录
- config 项目的配置文件
- docs 项目相关的文档目录
- lib 服务端库文件
- logs 日志文件目录
- mock mock假数据目录
- node_modules
- server 服务端源代码存放目录
- controllers 控制器
- routes 路由
- service 接口
- views 视图
- src 客户端源代码存放目录
- components
- pages
- views 视图
- tests 测试文件目录
准备开发环境
- mkdir build config docs lib logs mock server src tests
- npm init --yes 生成项目的初始文件
- npm i koa koa-logger koa-route koa-static co-views --save 安装服务器端的相关依赖
- npm i babel-cli babel-preset-es2015-node5 --save 安装babel依赖,动态编译es6代码
- npm i babel-loader babel-preset-es2015 babel-preset-react --save 安装Babel相关依赖,用于编译React代码。
- npm i webpack webpack-dev-server --save-dev 安装webpack打包工具,只在开发环境使用
- npm i react react-dom --save
- npm i mcss mcss-loader --save
- npm i css-loader file-loader raw-loader json-loader style-loader --save-dev 安装mcss相关依赖,编译css,json等静态资源
- 创建Webpack配置文件:config/webpack.config.js
package.json文件里新增:
"scripts": {
"start": "babel-node src/pages/demo1.js",
"build": "webpack --config config/webpack.config.js",
"watch": "webpack-dev-server --config config/webpack.config.js --hot --inline --progress --colors --devtool eval"
},
"babel": {
"presets": [
"es2015-node5"
]
},- 创建入口文件 /src/pages/demo1.js
- 编写组件 /src/components/root.jsx
- 编写JS文件,引用组件 /src/controllers/root.js
- 定义视图文件,引入JS /src/views/root.html
- 使用npm run build生成打包JS文件
- 使用npm run watch启动webpack-dev-server
- 打开浏览器访问http://localhost:8080查看结果
参考:(按优先级排列)
http://wwsun.github.io/posts/react-with-es6-part-1.html
http://www.aliued.com/?p=3077
es6+react环境搭建的更多相关文章
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- React 环境搭建及页面调试方法
React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- 从零开始react实战:云书签-1 react环境搭建
总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...
- react环境搭建及文件配置
webpack简介 构建工具(基于Nodejs)node(v16)前端工程化. 环境搭建 创建一个空的package.json npm init webpack核心包(提供了API,插件) npm i ...
- react+es6+webpack环境搭建以及项目入门
前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- react环境搭建
react-webpack文件夹是开发目录,在此目录下执行命令,假设你已经正确安装了 nodejs 一:参照教程搭建环境 https://github.com/newtriks/generator-r ...
随机推荐
- java多线程学习
在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 一.扩展java.lang.Thread类 package com.multithread.lea ...
- python-1 python基础知识
python第一课代码笔记 hello world [root@heartbeat-data- python]# vim hello1.py #!/usr/bin/env python print ( ...
- Makefile隐含规则
两个隐含规则; 将所有的name.o的依赖自动推导为name.c并使用规则$(CC) -c $(FLAGS) $(CPPFLAGS)得到目标.这个规则中只有-c是隐含规则中有的,后面两个变量是留给用户 ...
- sed入门详解教程
sed是一个比较古老的,功能十分强大的用于文本处理的流编辑器,加上正则表达式的支持,可以进行大量的复杂的文本编辑操作.sed本身是一个非常复杂的工具,有专门的书籍讲解sed的具体用法,但是个人觉得没有 ...
- C++杂谈(二)初识vector容器与迭代器
教科书中失踪的vector 很奇怪的一件事情,在当时学习C++的时候,老师并没有讲授容器的内容,当时参考的谭浩强老师的红皮C++也没有这个内容,不知为何.后来再学C++,发现容器是一个很重要的概念,在 ...
- 描述Linux系统开机到登陆界面的启动过程(计时2分钟)
简述: 1.开机BIOS自检 2.MBR引导 3.grub引导菜单 4.加载内核kernel 5.启动init进程 6.读取inittab文件,执行rc.sysinit,rc等脚本 7.启动minge ...
- CentOS7 (64位) 下QT5.5 连接MySQL数据库(driver not loaded)
用qt连接MySQL需要共享库 libqsqlmysql.so的驱动,路径在plugin/sqldrivers目录下,乍看已经可用了,其实不然. 用ldd命令分析一下,libmysqlclient_r ...
- [转]ORA-01034: ORACLE not available如何解决
本文转自:http://www.cnblogs.com/zhwl/p/3726003.html 一个小小的问题,让我折腾了一个上午,下午三点彻底解决了,分享一个给大家解决方法,尽管在测试服务器上,但是 ...
- 使用jMeter测试Solr服务接口
之前一直用ab做简单的服务接口测试,ab功能强悍,使用简单,但是没有生成专题图和表格等功能,因此,我们决定使用jmeter来作为我们测试工具.接下来,我们将详细介绍jmeter使用的步骤,主要包括:j ...
- Nodejs 请求转发代理
var sendPromise = function (res, callback) { var options = { hostname: settings.Ip, port: settings.P ...