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

標籤：地址   read   rman   lan   添加   value   public   uid   path   

引言：

　　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

View Code

 

 

建立一個應用程式

1 create-react-app ProjectName

View Code

 

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

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 [email protected]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的項目