如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目

Posted 2020-10-03

引言：

　　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。