(参考别人结合自己的整理得出,若有错误请大神指出)
Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。
详细文档可前往链接：Create-React-App文档
本文将介绍使用Create-React-App脚手架搭建antd-mobile的开发环境。
快速开始：
npm install -g create-react-app /* 安装create-react-app，建议使用cnpm */ create-react-app myapp /* 使用命令创建应用，myapp为项目名称 */ cd myapp /* 进入目录，然后启动 */ npm start /*启动运行*/
按以上执行，即可快速创建一个React开发环境。
会自动打开默认浏览器 http://localhost:3000/
环境配置介绍：
一、项目结构：
生成项目后，脚手架为了“优雅”... ...隐藏了所有的webpack相关的配置文件，此时查看myapp文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：
npm run eject
查看myapp 文件夹，可以看到完整的项目结构：
myapp/ node_modules/ /*这个是所有下载的依赖*/ package.json .gitignore config/ paths.js polyfills env.js webpack.config.dev.js webpack.config.prod.js public/ index.html /* 入口html文件 */ scripts/ <b>build.js</b> /*打包命令配置文件*/ <b>start.js</b> /*启动命令配置文件*/ test.js src/ App.js index.js /* 主入口文件 */
二、项目配置介绍
放上webpack 、npm 的充电传送门： 【webpack学习教程】
查看package.json文件的scripts，
"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", },
可知，运行时是直接执行scripts文件目录下的js文件。
其中*start.js*为开发环境，*build.js*为打包脚本。
build.js 此处打包 生成的 文件 路径引用有问题
解决方法在另外一片文章中react.js - 基于create-react-app的打包后文件根路径修改
SASS、LESS等CSS预处理器配置
Facebook官方在create-react-app升级到某一版本，突然丢掉了默认对sass、less等预处理器的支持，官方文档说明
于是，只能自己动手，在config目录下，webpack.config.dev.js 和 webpack.config.prod.js文件，没有抽出 loader、postcss之类一般共用的配置，于是，在两个文件夹都要一起配置，也可以抽出共用部分，以便维护。
这里以webpack.config.dev.js举例，webpack.config.prod.js一样配置即可：
SASS-loader：
1、命令行，在当前目录执行：npm install sass-loader node-sass --save-dev
2、找到webpack.config.dev.js文件中 loaders中的第一项exclude（值为数组），排除scss文件，否则将被'url-loader'捕获。
{ exclude: [ /.html$/, /.(js|jsx)(?.*)?$/, /.css$/, /.json$/, /.svg$/, /.scss$/ ....新增项! ]
3、loaders新增一项：
{ test: /.scss$/, loader: 'style!css!postcss!sass?outputStyle=expanded' },
至此，SASS文件就可以正常打包了（此处针对SCSS文件，如用到SASS，可将SCSS的正则修改下），LESS文件类似，不再赘述。
三、antd-mobile的引入及配置
在命令行执行：
npm install antd-mobile --save
移动端高清方案
因0.8以后的版本引入移动端高清方案，因此需要在webpack等增加相应配置，**必须配置！**，官方说明 按官方说明配置即可。
按需引入
为减少打包后体积以及方便书写，使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。
import {Picker} from 'antd-mobile';
自动引入CSS和JS，无需再引入整个antd-mobile的整个CSS文件
使用如下：
命令行执行：
npm install babel-plugin-import --save-dev
1）package.json
"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] },
2）.babelrc
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}注意： 不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。
四、杂项
React-Router版本
现在最新版本React-Router为4.x.x，与原用的2.x.x的API变化稍大（官方直接跳过了3...），如需使用2.x.x版本，可先卸载router,执行命令
pm remove react-router --save
然后在package.json中dependencies新增字段：
"react-router": "^2.0.0 < 3.0.0",
接着执行：
npm install
到这里，就算搭建完开发环境了，可以正常进行开发了。
《《后续》》===============================================
新增对less 的 配置 以及对antd 的修改的两种方案
一. React-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。
- 安装react-app-rewired
npm install --save-dev react-app-rewired
- 修改package.json启动项
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
}- 在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};- 使用babel-plugin-import实现Antd按需加载，修改config-overrides.js
npm install --save-dev babel-plugin-import
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config);
return config;
};5.使用react-app-rewire-less配置Less
npm install --save-dev react-app-rewire-less
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
config = rewireLess.withLoaderOptions({
modifyVars: { "@primary-color": "#1DA57A" },
})(config, env);
return config;
};我遇到的问题：
- _DEV_ is not defined.
npm install --save-dev react-app-rewire-defind-plugin
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireDefinePlugin = require('react-app-rewire-define-plugin');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
config = rewireLess.withLoaderOptions({
modifyVars: { "@primary-color": "#1DA57A" },
})(config, env);
config = rewireDefinePlugin(config, env, {
__DEV__: false
});
return config;
};- Cannot read property ‘exclude’ of undefined 参考 https://github.com/timarney/react-app-rewired/issues/145 解决方案 https://github.com/dawnmist/react-app-rewired/commit/25208ab81791edb4356dc959188bcd4c4471ad87
二. npm run eject 暴露所有内建的配置
- 使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。
npm install --save-dev babel-plugin-import
1）package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
},2）.babelrc
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}注意： 不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。
- 引入Less
1）安装less-loader 和 less
npm install --save-dev less-loader less
2）修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改) 查找 ：exclude 原本的 exclude: [/.js$/, /.html$/, /.json$/], 修改为 exclude: [/.html$/, /.(js|jsx)$/, /.(css|less)$/, /.json$/, /.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
查找：test: /.css$/ 原本的 test: /.css$/, 修改为 test: /.(css|less)$/,
在这个test的下面找到use，添加loader
use: [
{...},
{...},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],ok，以上两种方式修改配置，择优选取。 如果引入Antd，可能依赖于引入Less， 如果不想引入Antd，可以舍弃Antd部分，按步骤引入Less。
后续 我会把配置好的git 地址贴上 供大家参考，若有不足 请指出