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

本文轉載自查看原文 2020-06-12 15:03 751 react/ react搭建

一開始

1 全局安裝腳手架

npm install -g create-react-app

如果window下安裝報錯了，類似如下報錯信息（網上教程看到別人有報錯，我這里window10系統沒有發現有這個報錯）

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

2 通過腳手架搭建項目

create-react-app <項目名稱>

3 開始項目

cd <項目名>
npm run start

二、查看項目 package.json 信息

1 package.json 一覽

 1 {
 2   "name": "ws-student-app",
 3   "version": "0.1.0",
 4   "private": true,
 5   "homepage": ".",
 6   "dependencies": {
 7     "@testing-library/jest-dom": "^4.2.4",
 8     "@testing-library/react": "^9.5.0",
 9     "@testing-library/user-event": "^7.2.1",
10     "react": "^16.13.1",
11     "react-dom": "^16.13.1",
12     "react-scripts": "3.4.1"
13   },
14   "scripts": {
15     "start": "react-scripts start",
16     "build": "react-scripts build",
17     "test": "react-scripts test",
18     "eject": "react-scripts eject"
19   },
20   "eslintConfig": {
21     "extends": "react-app"
22   },
23   "browserslist": {
24     "production": [
25       ">0.2%",
26       "not dead",
27       "not op_mini all"
28     ],
29     "development": [
30       "last 1 chrome version",
31       "last 1 firefox version",
32       "last 1 safari version"
33     ]
34   }
35 }

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: 測試單元演示文件，暫時並不知道干嘛用；可以直接刪除；
.gitignore: 該文件是github過濾文件配置
README.md: 該文件是github描述文件
package.json: 定義了項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。部分依賴模塊被隱藏；

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

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

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

1 {
2 ...
3 "scripts": {
4 "eject": "react-scripts eject"
5 },

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

執行后，你會發現項目中多了很多webpack相關的文件：

如果執行完npm/yarn run eject 后報以下錯誤

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

git init
git add .
git commit -m 'Saving before ejecting'
npm run eject

五添加對scss和less 的支持

1.對scss的支持

安裝依賴

npm install sass-loader node-sass

安裝成功后，在src目錄下新建一個index.scss文件。在這個.scss文件中用scss的語法就可以了，是可以用的

 1 //scss語法是, 有{}
 2 
 3 $color:red;
 4 
 5 .a{
 6 
 7 　　color:$color;
 8 
 9 }

 
 sass是老語法，語法是沒有{} 沒有;因為不符合大家的編程習慣，所以淘汰了，scss的語法現在用起來了

1 //sass語法 沒有{}
2 $color:red;
3 
4 .a
5 　color:$color

然后再App.js文件中引入.scss文件，就可以全局引入你寫的scss啦

此時，重新npm run start 編譯一下項目，就能看到項目中的字體變成紅色啦

2.對less的支持

我們在使用react框架時，很多時候會用到antd UI框架，而antd 的樣式使用了 Less 作為開發語言，所以我們需要配置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。

第二步：

找到config/webpack.config.js文件，這個文件有三個地方需要修改

①找到這個地方

然后復制后面兩行代碼，添加兩個常量

const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;

②找到getStyleLoaders方法，增加lessOptions參數，並增加以下代碼：

{
    loader: require.resolve('less-loader'),
    options: lessOptions,
},

③在oneOf數組中找到下方代碼：

將紅框中的代碼復制一份，在此后增加，按照less的配置修改

代碼：

 1    {
 2               test: lessRegex,
 3               exclude: lessModuleRegex,
 4               use: getStyleLoaders({
 5                 importLoaders: 2,
 6                 sourceMap: isEnvProduction && shouldUseSourceMap,
 7               },
 8               ),
 9               // Don't consider CSS imports dead code even if the
10               // containing package claims to have no side effects.
11               // Remove this when webpack adds a warning or an error for this.
12               // See https://github.com/webpack/webpack/issues/6571
13               sideEffects: true,
14             },
15             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
16             // using the extension .module.css
17             {
18               test: lessModuleRegex,
19               use: getStyleLoaders({
20                 importLoaders: 2,
21                 modules: true,
22                 getLocalIdent: getCSSModuleLocalIdent,
23                 sourceMap: isEnvProduction && shouldUseSourceMap,
24               }),
25    },

然后同sass一樣，新建一個.less文件，寫上樣式，在App.js中引入.less文件,並在標簽中使用重啟即可。

定義less:

引入並使用：

效果：

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

1. 安裝antd-mobile依賴

npm install antd-mobile --save

2.在組件中使用

在App.js或者任意一個組件中引入Button組件（這里我以test.js組件為例）：

先引入，后面安裝的 babel-plugin-import 會幫助你加載 JS 和 CSS 無需單獨引入樣式

 import { Button } from 'antd-mobile'

然后使用

 <Button type="primary">primary</Button>
 <Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>

完整test組件代碼：

import React, { Component } from 'react';
import { Button } from 'antd-mobile'


class test extends Component {
    state = {  }
    render() { 
        return ( <div>
            我是組件
            <Button type="primary">primary</Button>
            <Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>

        </div> );
    }
}
 
export default test;

3.安裝 babel-plugin-import 依賴

 npm install babel-plugin-import --save

4.在 package.json 配置 antd-mobile 的按需加載

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

5.效果展示

這時候就能看到展示效果啦

6.注意

對於移動端，入口頁面 (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>

七實現對修飾器的支持：實現對 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://www.cnblogs.com/luziluck/p/11346771.html

https://blog.csdn.net/qq_43258252/article/details/87874311

https://ant.design/docs/react/use-with-create-react-app-cn

https://www.cnblogs.com/alice626/p/10967825.html