利用create-react-app從零開始搭建React移動端環境

一 開始

1 全局安裝腳手架

npm install -g create-react-app

這有個坑，就是在window下安裝一直會報錯，報錯信息如下：

解決辦法：在開始菜單欄里打開cmd的時，右擊選擇“以管理員身份運行”。然后再在打開的cmd里運動install就沒問題了。

 

2 通過腳手架搭建項目

create-react-app <項目名稱>

 

3 開始項目

cd <項目名>
npm run start

 

二、 查看項目 package.json 信息

1  package.json 一覽

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

　　

2 可用命令說明：

• 首先說明：通過npm run 執行下面命令實際上是運行 node_modules/react-srcipt/script 下對應的腳本文件；
• npm run start: 開始項目，運行項目后可通過 http://localhost:3000 訪問項目；
• npm run build: 項目打包，在生產環境中編譯代碼，並放在build目錄中；所有代碼將被正確打包，並進行優化、壓縮同時使用hash重命名文件；執行該命令前需要在 package.json 中新增條配置"homepage": "."（上面配置文件已給出）, 同時build后的項目需要在服務器下才能訪問；否則打開的將是空白頁面；
• npm run test: 交互監視模式下啟動測試運行程序；
• npm run eject: 將隱藏的配置導出；需要知道的是create-react-app腳手架本質上是使用react-scripts進行配置項目，所有配置文件信息都被隱藏起來(node_modules/react-scripts)；當需要手動修改擴展webpack配置時有時就需要將隱藏的配置暴露出來；特別需要注意的是該操作是一個單向操作，一旦使用eject，那么就不能恢復了(再次將配置隱藏)；

三、 自動生成的項目目錄以及文件解析：

• node_modules : 項目依賴包目錄；
• public: 公共目錄，該目錄下的文件都不會被webpack進行加載、解析、打包；通過npm run build進行打包時該項目下的所有文件將會直接被復制到build目錄下；
  • favicon.ico : 是網站圖標[可替換刪除]
  • index.html: 頁面模板，webpack打包后將輸出文件引入到該模板內；補充：index.html中通過環境變量%PUBLIC_URL% 來指向public目錄路徑；
  • manifest.json: PWA將應用添加至桌面的功能的實現依賴於 manifest.json 。通過manifest.json 文件可以對圖標、名稱等信息進行配置。
• src: 是源碼目錄該目錄下除了index.js App.test.js registerServiceWorker.js 文件具有一定意義其余文件都是演示使用可直接刪除
  • index.js: 是整個項目的入口文件；
  • App.test.js: 測試單元演示文件，暫時並不知道干嘛用；可以直接刪除；
  • registerServiceWorker.js: service worker 是在后台運行的一個線程，可以用來處理離線緩存、消息推送、后台自動更新等任務；registerServiceWorker就是為react項目注冊了一個service worker，用來做資源的緩存，這樣你下次訪問時，就可以更快的獲取資源。而且因為資源被緩存，所以即使在離線的情況下也可以訪問應用（此時使用的資源是之前緩存的資源）。注意，registerServiceWorker注冊的service worker 只在生產環境中生效，並且該功能只有在https下才能有效果；
• .gitignore: 該文件是github過濾文件配置
• README.md: 該文件是github描述文件
• package.json: 定義了項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。部分依賴模塊被隱藏；
• yarn.lock：每次通過yarm添加依賴或者更新包版本時 yarn都會把相關版本信息寫入yarn.lock文件；npm也有類似功能，npm 也可以生成一個鎖文件，就是使用上沒有yarn方便

四   create-react-app 擴展webpack的方法

Create React App（以下簡稱 CRA）是創建 React 應用的一個腳手架，它與其他腳手架不同的一個地方就是將一些復雜工具（比如 webpack）的配置封裝了起來，讓使用者不用關心這些工具的具體配置，從而降低了工具的使用難度。但是對於一些熟悉 webpack 的開發者來說，他們可能想對 webpack 配置做一些修改，這個時候應該怎么辦呢？我們可以通過項目eject來進行

使用 CRA 創建完項目以后，項目在package.json里面提供了這樣一個命令：

{
...
"scripts": {
"eject": "react-scripts eject"
},
...
}

執行完這個命令——yarn run eject后會將封裝在 CRA 中的配置全部反編譯到當前項目，這樣用戶就可以完全取得 webpack 文件的控制權，想怎么修改就怎么修改了。

踩坑） 使用create-react-app命令創建一個react項目，運行npm run eject生成配置文件，報了下面的錯：

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2018-11-01T04_03_50_129Z-debug.log

主要問題是腳手架添加.gitgnore文件，但是卻沒有本地倉庫，按照以下順序就可以正常使用

　

create-react-app test
cd test
git init
git add .
git commit -m 'Saving before ejecting'
npm run eject

 

五 添加對 less 的支持

安裝依賴

npm install less-loader less -dev

 

通過npm run eject暴露出配置時候，webpack配置文件只有webpack.config.js，

但沒有webpack.config.dev.js和webpack.config.prod.js,查看網上各種解決辦法后，發現是因為create-react-app官方腳手架升級了。

這里我們就在webpack.config.js配置less。

方法：

//找到此位置
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 
//在此添加如下兩個常量
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;
 
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle

//找到此位置
 {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
 
//在這之后仿照上面添加如下代碼
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
            },

 

配置變了之后要重新啟動，不然無法看到效果。

六  在 create-react-app 中使用antd-mobile

1 安裝

npm install antd-mobile --save

2 使用

入口頁面 (html 或 模板) 相關設置：

引入 FastClick 並且設置 html meta (更多參考 #576)

引入 Promise 的 fallback 支持 (部分安卓手機不支持 Promise)

<!DOCTYPE html>
<html>
<head>
  <!-- set `maximum-scale` for some compatibility issues -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
</head>
<body></body>
</html>

 

3 按需加載：

使用 babel-plugin-import（推薦）。

npm install babel-plugin-import --save-dev

在package.json中添加如下代碼：

  "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
   ]

然后只需從 antd-mobile 引入模塊即可，無需單獨引入樣式。

// babel-plugin-import 會幫助你加載 JS 和 CSS
import { DatePicker } from 'antd-mobile';

 

七 實現對修飾器的支持： 實現對 babel 插件的使用

假設當前 Babel >= 7.x， 如果你的 Babel < 7.x 則需要將 ["@babel/plugin-proposal-decorators", {"legacy": true}] 修改為 ["transform-decorators-legacy"]

修改package.json

"babel": {"plugins": [
+   ["@babel/plugin-proposal-decorators", {"legacy": true}]
  ]
},

 

八  eslint 配置

• 通過修改 package.json 文件添加對 eslint 的擴展配置

  ...
  "eslintConfig": {
    // 默認繼承 腳手架自帶的 eslint 配置
    "extends": "react-app",
    // 在這里擴展新增配置
    "rules":{
       // 設置規則，具體看官網用戶指南下的規則文檔
       "eqeqeq": "off"
    }
   }

   

• 參考文檔：https://juejin.im/post/5b20a3546fb9a01e312833d5
                   https://www.jianshu.com/p/fa79cbfa6c6c
                   https://blog.csdn.net/qq_36709020/article/details/80275602
                  https://blog.csdn.net/qq_42190134/article/details/88528852
                  https://ant.design/docs/react/use-with-create-react-app-cn