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

引言：

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

 

　　一般咱們開始作一個react 項目的時候，都會本身利用 npm 或者 yarn 安裝項目所須要的一些依賴，再寫 webpack.config.js ,一系列複雜的配置,搭建好開發環境後寫src源代碼。

　　如今，若是你想要搭建一個完整的 react 項目環境，已經不須要本身動手佈置許許多多的東西，利用 create-react-app 工具，就能輕鬆幫你配置好一個 react 項目。

 

全局安裝 create-react-app

 

npm i create-react-app -g

 

 

建立一個應用程序

 

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。