本项目已作废,替代项目为 React-Study,欢迎交流学习。

项目地址:webpack-es6-react

这是一个基础的,综合了webpack,es6,react的学习模板。

本模板也方便你对 react 生态圈中其他相关知识的学习,比如你想学习 react-router,redux 或是 css-modules都可以以此模板为基础进行延伸学习。

webpack-es6-react

本模板应用了以下技术

Demo

react-transform-boilerplate

使用方法

git clone https://github.com/minooo/webpack-es6-react.git
cd webpack-es6-react 
npm install
npm start
打开 http://localhost:5000/

注意:package.json 的 scripts 中内置了三个命令
start 用于开发模式,方便调试,撸码
build 开发完毕后,就可以打包文件了,当然这个模板足够简单,不能应用于实际生产中,这里只是一个示范。
lint 检测你的js代码是否规范。

package.json 中的部分 包/库 说明

  • babel-core babel6 的基础模块

  • babel-eslint ESLint 是前端JS代码检测利器。而 babel-eslint 则允许你检测所有的 Babel 代码。

  • babel-loader 这个包允许你使用 Babel 和 webpack 转译(Transpiling) JavaScript 文件。

  • babel-plugin-react-transform 这个插件通过任意转换的方式去封装 React 组件。换句话说,你可以随心所欲的摆弄你的组件了。

  • babel-plugin-transform-runtime 在 Babel 转换过程中,详细的展示引用的相关辅助工具和内置命令,并自动的聚合填充你的代码而不会污染全局。

  • babel-preset-es2015 此预设包含了所有的 es2015 插件。

  • babel-preset-react 此预设包含了所有的 React 插件。

  • babel-preset-stage-0 此预设包含了 stage 0 中的所有插件。

  • eslint JavaScript 语法检测利器:分析出你代码潜在的错误和非标准用法。

  • eslint-plugin-react ESLint 中关于 React 语法检测的插件。

  • react-transform-hmr 一个 React 转换装置,该装置通过引用 Hot Module Replacement API 使热重载 React 的类成为可能。

  • react-transform-catch-errors 呈现你 React 组件的错误信息。

  • webpack-dev-server 为 wepack app 提供一个服务器,如果你的代码有任何变化,浏览器将自动刷新显示,极大的方便前期开发。

  • babel-runtime Babel 自带的运行环境。

根目录下部分文件说明

  • .babelrc : 什么是 .babelrc 文件呢?熟悉 linux 的同学一定知道,rc 结尾的文件通常代表运行时自动加载的文件,配置等。同样在这里也是有同样作用的。里面的 env 字段,可以对 BABEL_ENV 或 NODE_ENV 指定不同的环境变量,进行不同编译。

  • eslintignore 通知 eslint 忽略那些不应该被检测的文件。

  • eslintrc eslint 配置文件,使 JavaScript 代码规范化,标准化书写。

为什么要做这个模板

react 现在已经不能简单的说是一个库了,而是一个生态系统。围绕其出现的新技术层出不穷,而 babel 的出现让我们提前用上了下一代 javascript——es6, 作为前端的我们势必要紧随时代潮流。

本文固定链接:

webpack-es6-react (为系统学习React布一个良好的开局)

http://www.js-code.com/react/react_43328.html

80%的人都看过