Creat-React-App 奇妙之旅

最近一年多工做中，都在用vue进行开发，但心中一直对react有念念不忘。因而最近又想把react拎出来捣鼓一番。业界中总有vue好仍是react更优的讨论（比如php是最美的语言哈哈哈哈哈），我以为都挺好，vue的指令真的香，react一切皆组件的思想真的是高（现在有了hooks加持，函数组件也更香了）。你品，你细品。

言归正传。总之，想要学习一门框架语言，首先得有学习的轮廓基石吧。基于此，React官方推出的Create-React-App（如下简称CRA）很好地解决了咱们的烦恼。

CRA提供了开箱即用的服务，默认内置了大量优秀的项目（好比Webpack、Babel、Eslint）为应用作了支持。不管你是使用 React仍是其余库，Create React App 均可以让你专一于代码，而不是专一于构建工具。

但在实际应用开发中，CRA默认配置可能没法知足咱们的业务需求，因此本篇文章的目标就是对CRA实现有效扩展。让咱们一块儿开始CRA奇妙之旅吧～

---

初始化项目

为了更好规范团队多人协同开发，采用Typescript。TypeScript是JavaScript的类型超集，可编译为纯 JavaScript 。

使用 TypeScript 建立新的 Create React App 项目，你能够运行：

$ npx create-react-app my-react-app-ts --typescript
复制代码

---

如何扩展默认内置Webpack？

若是你对构建工具和配置选项不满意，官方提供eject脚本指令，直接eject出整个配置在业务项目里维护。切记该操做的缺点是不可逆，一旦配置文件暴露后就再也不可隐藏。

$ npm run eject
复制代码

显然，eject操做违背了CRA专一于代码，而不是专一于构建的初衷，思考有什么方式能够在不eject前提下，对默认CRA webpack配置作定制化修改，而后根据修改后配置编译工程呢？ 因而在React社区出现了react-app-rewired。

react-app-rewired 此工具能够在不eject也不建立额外react-scripts的状况下修改CRA内置的webpack配置，而后你拥有CRA的一切特性，且你能够根据你的业务须要去定制化配置webpack的plugins、loaders等。

另外customize-cra（对于react-app-rewired@2.x以上版本）辅助提供了一组用于自定义利用react-app-rewired核心功能的CRA2.0配置。

1）安装react-app-rewired（针对使用webpack4.0）

$ npm install react-app-rewired customize-cra --save-dev
复制代码

2）在根目录下建立一个config-override.js

/* react-app-rewired@2.x如下版本 */
module.exports = function override(config, env) {
    //do stuff with the webpack config...
    return config;
}
    
/* react-app-rewired@2.x以上版本 */
const {override, overrideDevServer, addWebpackAlias} = require('customize-cra');
    
module.exports = {
    webpack: override(
        addWebpackAlias({
            '@': path.resolve(__dirname, '.', 'src')
        })
    ),
    devServer: overrideDevServer()
};
复制代码

3）修改package.json文件

"scripts": {
    "start": "react-app-rewired start"
},
复制代码

---

如何分不一样环境读取变量值？

一般从开发到发布，会通过FAT、UAT、PROD三个环境，而不一样环境下相同变量对应的值是不同的。例如，接口baseURL在三个环境下分别是a、b、c，在分环境打包时如何自动根据不一样环境读取不一样变量值呢？因而，社区出现了dotenv-cli。

1）安装dotenv-cli

$ npm install dotenv-cli --save-dev
复制代码

2）在根目录下分别建立.env.fat，.env.uat，.env.prod

3）修改package.json文件

"scripts": {
    "serve:fat": "dotenv -e .env.fat react-app-rewired start",
    "serve:uat": "dotenv -e .env.uat react-app-rewired start",
    "serve:prod": "dotenv -e .env.prod react-app-rewired start",
    "build:fat": "dotenv -e .env.fat react-app-rewired build",
    "build:uat": "dotenv -e .env.uat react-app-rewired build",
    "build:prod": "dotenv -e .env.prod react-app-rewired build",
},
复制代码

如何规范git commit提交信息？

一般规范这种事情，人为约定去执行必定是非最佳选择，对于人为误操做没法控制。在多人协同开发团队中引入工具自动化校验是最合适的了。引入commitizen规范commit信息格式，引入yorkie经过git hooks在commit以前对信息进行校验，经过方可commit成功。

1）安装commitizen、cz-conventional-changelog、yorkie

$ npm install commitizen cz-conventional-changelog yorkie --save-dev
复制代码

2）在根目录下建立verify-commit-msg.ts

const chalk = require('chalk');
const msgPath = process.env.GIT_PARAMS;
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim();

const commitRE = /^(revert: )?(feat|fix|improvement|docs|style|refactor|perf|test|build|workflow|ci|chore|revert)(\(.+\))?: .{1,50}/;

if (!commitRE.test(msg)) {
  console.log();
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
    `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.\n`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
  );
  process.exit(1)
}
复制代码

3）修改package.json

"scripts": {
    "commit": "git-cz"
},
"gitHooks": {
    "commit-msg": "node scripts/verify-commit-msg.ts"
},
"config": {
    "commitizen": {
        "path": "cz-conventional-changelog"
    }
}
复制代码

4）执行

$ npm run commit
复制代码

---

如何引入scss预处理器&导入scss公共样式文件

要想使用sass，CRA官方文档已经有了详细说明，首先安装node-sass

$ npm install node-sass --save-dev
复制代码

将全部 *.css 文件后缀改为 *.scss或 *.sass，该类文件将会自动编译。

要在 Sass 文件之间共享变量，可使用 Sass 导入。 例如，src/App.scss和其余组件样式文件可能包含 @import "./shared.scss"; 中定义的变量。

可是随着业务饱满，代码量增长，每一个scss文件都手动@import公共样式文件是否是以为很累，也太傻瓜了呢（哈哈哈哈哈）。一般会经过引入sass-resources-loader解决这种烦恼，可是在CRA中经过rewired方式引入sass-resources-loader呢？让咱们回到customize-cra。

1）安装sass-resources-loader

$ npm install sass-resources-loader --save-dev
复制代码

2）修改config-overrides.js

const {override, adjustStyleLoaders} = require('customize-cra');
module.exports = {
  webpack: override(
    adjustStyleLoaders(rule => {
      if (rule.test.toString().includes('scss')) {
        rule.use.push({
          loader: require.resolve('sass-resources-loader'),
          options: {
            resources: './src/styles/shared.scss'
          }
        });
      }
    }),
  )
};
复制代码

---

如何实现移动端自适应？

因为本人实际工做方向以移动端H5为主，那么移动端针对不一样大小机型实现页面布局的响应式变化是我特别关注的一点。一般页面自适应能够经过rem或vwvh等来实现，但设计师给到开发的设计稿都是以固定宽高像素px设计的，那么如何把px根据设计比例转化为rem或vwvh单位呢，人工手工换算或者每次引入公共mixin函数是否是都会以为繁琐，试想这件事若是交给webpack去作呢。 以px转vh为例，如何在CRA中经过rewired方式自动转换？

1）安装postcss-px-to-viewport

$ npm install postcss-px-to-viewport --save-dev
复制代码

2）修改config-overrides.js

const {override, addPostcssPlugins} = require('customize-cra');

module.exports = {
  webpack: override(
    addPostcssPlugins([
      require('postcss-px-to-viewport')({
        unitToConvert: 'px',
        viewportWidth: 1024,
        viewportHeight: 768,
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vh',
        fontViewportUnit: 'vh',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: [],
        landscape: false,
        landscapeUnit: 'vh',
        landscapeWidth: 568
      })
    ])
  )
};
复制代码

---

总结

到此，本文主要介绍的是如何扩展CRA的一些基础 webpack配置，每一个人能够根据自身业务需求，再进行定制化扩展，好比自定义eslint规则、prettier格式规范等。

固然一个完整的SPA应用，固然少不了路由的概念，能够经过react-router官方去学习，在v4以后，照着路由皆组件的思想应该更易理解。在这里就不作详述了。

最后再提一句react hooks吧，hooks就是曾经函数组件（无状态组件）的增强武器，使其具有了类组件同等的能力，还大大减小了代码量。之后是否是就能够大声说：一切皆函数组件了😊。

感谢你们的阅读～