脚本宝典收集整理的这篇文章主要介绍了webpack-es6-react (为系统学习React布一个良好的开局),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本项目已作废,替代项目为 React-Study,欢迎交流学习。
项目地址:webpack-es6-react
这是一个基础的,综合了webpack,es6,react的学习模板。
本模板也方便你对 react 生态圈中其他相关知识的学习,比如你想学习 react-router
,redux
或是 css-modules
都可以以此模板为基础进行延伸学习。
webpack-es6-react
本模板应用了以下技术
Webpack 我们的构建工具
React Transform 可以让 React 组件局部自动实时更新(而不是刷新页面)
Demo
使用方法
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-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布一个良好的开局)全部内容,希望文章能够帮你解决webpack-es6-react (为系统学习React布一个良好的开局)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。