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

一 開始

1 全局安裝腳手架

npm install -g create-react-app

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

解決辦法：在開始菜單欄裏打開cmd的時，右擊選擇「以管理員身份運行」。而後再在打開的cmd裏運動install就沒問題了。

 

2 經過腳手架搭建項目

create-react-app <項目名稱>

 

3 開始項目

cd <項目名>
npm run start

 

2、 查看項目 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，那麼就不能恢復了(再次將配置隱藏)；

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

• 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"
    }
   }

   

• 參考文檔：http://www.javashuo.com/article/p-qvosdpgq-he.html                 https://www.jianshu.com/p/fa79cbfa6c6c
                   https://blog.csdn.net/qq_36709020/article/details/80275602
                  http://www.javashuo.com/article/p-gqqqnlju-cz.html                https://ant.design/docs/react/use-with-create-react-app-cn