引言：

　　create-react-app是Facebook發布的一款全局的命令行工具用來創建一個新的項目。

　　通常我們開始做一個react web或者 app 項目的時候，都會自己利用 npm 或者 yarn 安裝項目所需要的一些依賴，再寫 webpack.config.js ,一系列復雜的配置,搭建好開發環境後寫src源代碼。

　　現在，如果你想要搭建一個完整的 react 項目環境，已經不需要自己動手布置許許多多的東西，利用 create-react-app 工具，就能輕松幫你配置好一個 react 項目。

全局安裝 create-react-app

1
 
 npm i create-react-app -g

創建一個應用程序

1 create-react-app ProjectName

然後你可以看到創建完之後的目錄結構

my-app/  
--README.md  
--node_modules/  
--package.json  
--.gitignore  
--public/  
-----favicon.ico  
-----index.html  
--src/  
-----App.css  
-----App.js  
-----App.test.js  
-----index.css  
-----index.js  
-----logo.svg  

你會發現在整個項目文件夾中，並沒有 webpack.config.js 文件，這時候你只需要在項目目錄中執行 npm run eject 命令，你會看到他提示你 Are you sure you want to eject? This is permanent. 輸入y 然後回車，打開項目文件夾你會發現多了兩個目錄（ public 、 scripts），像這樣：

試著運行一下項目，輸入 npm run start 回車，瀏覽器會自動打開一個地址為 http://localhost:3000 的頁面，端口號為3000.

到這裏，一個react項目基本上已經搭建完成了，現在我們為項目引入 ant design mobile

使用yarn安裝：
    yarn add antd-mobile
使用npm安裝：
    npm install antd-mobile -D

安裝其他的一些開發依賴

yarn add --dev babel-plugin-import svg-sprite-loader@0.3.1 less less-loader postcss-pxtorem

接下來是項目的配置：

　　打開 config 文件夾中的 webpack.config.dev.js 文件，在 webpack.config.dev.js 中找到 exclude 追加兩行代碼，用於加載 less 和 svg 文件

module.exports = {
    module: {
        rules: [
            ...
            {
                exclude: [
                  /\.html$/,
                  /\.js$/,
                  /\.json$/,
                  /\.less$/,//追加
                  /\.svg$/,//追加
                ],
                ...
            }
        ]
    }
}

添加按需加載文件處理插件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                ...
                options: {
                  //追加
                  plugins: [
                    [‘import‘, { libraryName: ‘antd-mobile‘, style: true }],
                  ],
                  ...
                },
              },
        ]
    }
}

添加svg處理

module.exports = {
    module: {
        rules: [
            ...
            {
                test: /\.(svg)$/i,
                loader: ‘svg-sprite-loader‘,
                include: [
                  require.resolve(‘antd-mobile‘).replace(/warn\.js$/, ‘‘),  // antd-mobile使用的svg目錄
                  path.resolve(__dirname, ‘../src/‘),  // 個人的svg文件目錄，如果自己有svg需要在這裏配置
                ]
              },
            ...
        ]
    }
}

添加less處理

module.exports = {
    module: {
        rules: [
            ...
             {
                test: /\.less$/,
                use: [
                  require.resolve(‘style-loader‘),
                  require.resolve(‘css-loader‘),
                  {
                    loader: require.resolve(‘postcss-loader‘),
                    options: {
                      ident: ‘postcss‘, // https://webpack.js.org/guides/migrating/#complex-options
                      plugins: () => [
                        autoprefixer({
                          browsers: [‘last 2 versions‘, ‘Firefox ESR‘, ‘> 1%‘, ‘ie >= 8‘, ‘iOS >= 8‘, ‘Android >= 4‘],
                        }),
                        pxtorem({ rootValue: 100, propWhiteList: [] })
                      ],
                    },
                  },
                  {
                    loader: require.resolve(‘less-loader‘),
                    options: {
                      modifyVars: { "@primary-color": "#1DA57A" },
                    },
                  },
                ],
              }
            ...
        ]
    }
}

在此之前必須要引入 postcss-pxtorem 模塊，用於px轉rem

const pxtorem = require(‘postcss-pxtorem‘);

重新啟動項目，但是你會發現react的Logo沒了。此時就輪到 antd-mobile 閃亮登場了。

　　在 src/App.js 中導入antd-mobile的Icon,代碼如下：

import React, { Component } from ‘react‘;
import {Icon} from ‘antd-mobile‘;
import logo from ‘./logo.svg‘;
import ‘./App.css‘;

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <Icon type={logo} />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
export default App;

最後是使用antd-mobile提供的高清解決方案，你可以參考官方文檔或者按照以下步驟：

1. 　　下載未壓縮的 viewport.js 或者在壓縮版的 viewport.min.js
   
2. 　　在 public 目錄下的 index.html 中引入下載好的js，請內聯寫到所有 css 引用之前, 否則部分安卓機有問題，並且不要再設置meta標簽的viewport
3. 　　打開config/webpack.config.dev.js，新增一句代碼

{
      test: /\.css$/,
      use: [
          require.resolve(‘style-loader‘), {
              loader: require.resolve(‘css-loader‘),
              options: {
                  importLoaders: 1,
              }
          }, {
              loader: require.resolve(‘postcss-loader‘),
              options: {
                  ident: ‘postcss‘,
                  plugins: () => [
                      require(‘postcss-flexbugs-fixes‘),
                      autoprefixer({
                          browsers: [
                              ‘>1%‘,
                              ‘last 4 versions‘,
                              ‘Firefox ESR‘,
                              ‘not ie < 9‘, // React doesn‘t support IE8 anyway
                          ],
                          flexbox: ‘no-2009‘,
                      }),
                      pxtorem({ rootValue: 100, propWhiteList: [] }) //新增
                  ],
              },
          },
      ],
  },

重啟項目，你會發現css單位由px轉為了rem。

如何利用Facebook的create-react-app腳手架創建一個基於ant design mobile的項目