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就是曾經函數組件（無狀態組件）的增強武器，使其具有了類組件同等的能力，還大大減小了代碼量。之後是否是就能夠大聲說：一切皆函數組件了😊。

感謝你們的閱讀～