配置react开发环境

（此文默认使用npm，yarn命令同样适用）

安装create-react-app

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

如果你遇到如下错误：

$ create-react-app my-app
module.js:538
    throw err;
    ^

Error: Cannot find module 'chalk'

你需要卸载create-react-app并重新安装一下

npm uninstall -g create-react-app
npm install -g create-react-app

然后重新运行上面命令行

现在，你已经有了一个最基本的react开发环境，但是实际项目中我们还要有更丰富的配置，比如sass、eslint、反向代理、typescript、reacr-router、redux等等。

ok，继续配置

反向代理

反向代理是为解决ajax请求数据跨域的问题，它的优势就是不用依赖于前后端的配合添加跨域白名单，可以说是一劳永逸的方法，配置方法很简单，在package.json中，添加：

 "proxy": "http://xxxx.net"

其中，http://xxxx.net就是你本地服务器要代理的服务器域名。配置完成后重新npm start即可

扩展 webpack 配置

create-react-app将webpack的配置做了封装，开发者不用再关心这些具体配置，从而降低了上手难度。但是也有部分开发者有自定义webpack 配置的需求，所以该怎么办呢？修改 webpack 配置方法有好几种，此处只介绍其中两种。其他方法可以谷歌

npm run eject弹出配置

此方法一旦执行eject就不可恢复，执行前可以备份项目。(eject前要提交代码到仓库，否则会报错) 执行命令行：
```
npm run eject
```
执行完这个命令根目录会多一个config文件夹，webpack配置文件就在该文件夹
react-app-rewired

此方法在create-react-app更新到2.x之后就不在支持额外配置

2.x之前的方法可以参考github官方的介绍： https://github.com/timarney/react-app-rewired

配置sass

create-react-app更新到2.x之后安装node-sass之后就可以直接用scss文件来做开发具体介绍可以看添加 Sass 样式表 create-react-app版本在2.x之后的可以跳过此项配置

首先安装node-sass、sass-loader包

npm install node-sass sass-loader --save-dev

此处容易报错，可能你需要切换安装淘宝镜像源，可以安装nrm切换，如果还是报错，请参考此博客

安装成功之后，需要配置webpack，请先确保上一步扩展 webpack 配置已完成。

然后在webpack.config.dev.js、webpack.config.prod.js中找到exclude配置项添加/.scss$/，配置后为：

exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /.scss$/],

然后，在module-->rules-->oneOf数组中添加最后一项配置：

{
  test: /\.scss$/,
  loaders: ['style-loader', 'css-loader', 'sass-loader']
}

至此，sass配置就完成了，可以重新npm start添加一个sass文件尝试一下

配置`px`单位转`rem`单位

此配置需要在移动端书写px可以自动转化为rem单位。

有两个插件可供选择：

postxss-px2rem

此插件自定义配置相比较差一点，比如不能配置1px不转换。

npm i postcss-px2rem -S

安装依赖后，打开webpack.config.js或webpack.config.dev.js

const px2rem = require('postcss-px2rem');

...
略去中间代码
...

options: {
  // Necessary for external CSS imports to work
  // https://github.com/facebook/create-react-app/issues/2677
  ident: 'postcss',
  plugins: () => [
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
    }),
    // 1rem对应75px
    px2rem({
      remUnit: 75
    })
  ],
  sourceMap: isEnvProduction && shouldUseSourceMap,
},

`postxss-pxtorem`

npm i postcss-pxtorem -S

安装依赖后，打开webpack.config.js或webpack.config.dev.js

options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
  autoprefixer: {
    flexbox: 'no-2009',
  },
  stage: 3,
}),
require('postcss-pxtorem')({
   rootValue: 32, // 换算的基数
   minPixelValue: 2, // 小于2px的值不转换
   selectorBlackList: [], // 忽略转换正则匹配项
   propList: ['*']
 })
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},

重新运行即可。

配置全局Sass

先安装sass-resources-loader

npm i sass-resources-loader -D

安装好之后，修改config/webpack.config.js配置

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders({
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ),
  sideEffects: true,
},

修改为

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders({
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ).concat({
    loader: 'sass-resources-loader',
    options: {
      // 这里是需要引入全局的资源文件，它可以是一个字符串或者是一个数组， 通常用数组去代替。
      resources: ['./src/style/color.scss', './src/style/mixin.scss', './src/style/reset.scss']
    }
  }),
  sideEffects: true,
},

重启项目即可。

yoowinsu / blog