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 ...
随机推荐
- 布局 position
position : 设置定位方式 跟『定位』相关的有一些属性,最重要的一个是『position』,它主要是设置『定位方式』. 而定位方式最重要的是设置『参照物』. 配合 position 使用的有这 ...
- 记录git多人协作开发常用的流程,供新手参考
声明:博主写的博客都是经过自己总结或者亲测成功的实例,绝不乱转载.读者可放心看,有不足之处请私信我,或者给我发邮件:pangchao620@163.com. 写作目的: 记录一下我看完廖学锋老师的gi ...
- android xml 布局错误(黑掉了)Missing styles. Is the correct theme chosen for this layout?
发现在调整页面的时候 ,老是报以下错误,导致无法静态显示ui效果. Missing styles. Is the correct theme chosen for this layout? Use t ...
- view类的setVisibility
android view setVisibility():有三个参数:Parameters:visibility One of VISIBLE, INVISIBLE, or GONE,想对应的三个常量 ...
- git pull
今天在服务器上git pull是出现以下错误: error: Your local changes to the following files would be overwritten by mer ...
- 异或的精彩应用 FIX_BTMAP_END
源文件是arch/x86/include/asm/fixmap.henum fixed_addresses {#ifdef CONFIG_X86_32 FIX_HOLE,... _ ...
- dba诊断之IO
--查看占用系统io较大的session SELECT se.sid,se.serial#,pr.SPID,se.username,se.status,se.terminal,se.program ...
- 简易的IOS位置定位服务
有时一些小的需求,其实只是需要得知当前IOS APP使用的地点,有些只是想精确到城市级别,并不需要任何地图. 有了以下的简易实现: @interface MainViewController ()&l ...
- php 连续留存与留存人数计算
for($i = 0;$i <= $interval;$i++) { $res = $model->turnround($today,$tomorrow,$flag); $temp = a ...
- checkbox勾选判断
var xieYi=document.getElementById("xieYi"); if(!xieYi.checked){ alert("请先阅读并勾选购买协议!&q ...