bestsuperdev/react-less-boilerplate2

React Less Boilerplate2

这个脚手架项目专门为 react 开发应用定制，支持ie8以及其他现代浏览器，使用 less 和 postcss 。和 react-less-boilerplate 主要区别是使用 webpack2.x 和 react-hot-loader3.x ，目前 webpack1.x 已经不受支持了，而且 webpack2.x 能够提供更多的特性，API 也更加人性化。

IE8 支持

开发环境不支持 IE8, 要在 IE8 中调试，请编译打包后用 IE8 访问 http://127.0.0.1:9000/dist 开发项目中如果要支持 IE8 ,请将 react 版本更换为 0.14.x 系列版本，代码方面详情见下述页面

Babel下的ES6兼容性与规范
 react 项目的一个ie8兼容性问题
 react-ie8

开始

clone this repo
cd into folder
npm install
npm run mock 先启动测试数据服务器
npm start 启动开发服务器
auto open http://yourIP:9000 (not localhost or 127.0.0.1 , for mobile test)

内置开发辅助插件

jsx 和 less 支持

通过 babel6.x，支持 react jsx 和 es2015 的语法。关于 babel 的支持情况，可以查看babel的相关文档 babel文档

postcss 后处理器

内部集成了 autoprefixer ,要支持更多插件请查看postcss.parts

集成类库

normalize.css
beyond-lib
beyond-remote

启动restful测试数据服务器

npm run mock 启动测试数据服务器，数据配置在mock文件夹里，更详细的配置请参考json-server文档

代码规范检查

npm run lint

采用eslint对js代码进行检查，配置文件为.eslintrc.json ，可以参考官方文档eslint

执行单元测试

目前因为 webpack 升级问题，单元测试暂时无法运行

npm run test

采用karma和jasmine的组合进行单元测试，karma是一个针对web前端进行单元测试的自动化环境，jasmine是单元测试框架。单元测试的代码支持es6，请在test文件夹中新建测试文件。可以参考官方文档karma jasmine

设置代理

**下面代理方式不推荐使用，目前已经通过 express-http-proxy 设置代理，详情请看 server.js 文件 ** npm start启动的是webpack-dev-server服务器并进行开发，如果需要请求api进行开发测试，那么就会存在跨域的问题，因此需要设置webpack-dev-server的代理服务器，将webpack-dev-server服务器的一个path映射到api服务器。请更改server.js文件中的new WebpackDevServer 第二个参数的proxy属性，示例如下：

//不推荐使用以下代码，某些情况下会失效，以及出现一些奇怪的问题
// `/api/*` 会映射 http://127.0.0.1:3000/api/* ，如 `/api/todos` 映射 http://127.0.0.1:3000/api/todos
new WebpackDevServer(webpack(config), {
  proxy : {
    '/api/*' : {
      target : 'http://127.0.0.1:3000'
    }
  }
  
})

// 推荐使用如下方式
server.use('/api', proxy('http://127.0.0.1:9001', {
	forwardPath: function (req, res) {
		console.log(req.url);   
		var redirect = require('url').parse(req.url).path;
		console.log(redirect); 
		return '/api' + redirect;   //如果转发后的 path 中不需要 api ，可以直接 return  redirect
	},
	https: false,
	reqBodyEncoding: null
}));

已经内置集成了一个restful测试数据服务器json-server，通过npm run mock启动，并从webpack-dev-server指向该服务，通过 http://yourIP:9000/api 可以访问，点击查看json-server文档

关于apiPath的另外一些tips，可以查看前后端分离下的前后端交互路径问题

图片和字体引入

在 js 和 css 中引入图片或者字体，当体积小于等于 30kb 时，会作为 dataUrl 编译在js或者css文件中，url返回dataUrl，超过该大小，会返回图片的url。

var url = require('img.png')
var img = new Image
img.src = url

编译打包

会在dist文件中输出合并后的js，css，图片，字体等静态资源文件。

npm run deploy

打包完成之后与后台整合

在dist命令完成之后，会在dist文件夹中生成打包的文件，包括 index,js,css 以及图片字体等文件，请按照index.html的模板方式引入，head里面引入css文件，body底部引入js文件。

建议项目默认打包后的静态资源文件都放在后台项目的bundles文件夹中（index.html可以不需要添加）

bestsuperdev / react-less-boilerplate2