create-react-app + antd-mobile配置

最新推荐文章于 2024-07-16 21:58:15 发布

pugongyingyangyue

最新推荐文章于 2024-07-16 21:58:15 发布

阅读量2k

点赞数 1

前两天使用react + antd-mobile遇到点坑（还是自己没仔细看antd的文档），所以这里记录一下整个配置过程。
1. 安装Facebook官方推出的react脚手架工具create react app,
npm install -g create-react-app
2. 安装yarn,
npm install -g yarn
3. 使用create react app初始化一个react项目,并进入此项目
- create-react-app antd-demo
- cd antd-demo
4. 安装蚂蚁金服推出的antd-mobile,因为之前已经安装过yarn,所以这里使用yarn来添加
yarn add antd-mobile
5. 安装其他的一些开发依赖
yarn add --dev babel-plugin-import svg-sprite-loader@0.3.1 less less-loader postcss-pxtorem

以上就是整个项目的安装初始化。

接下来是项目的配置：
1. 由于creat react app这个工具将所有的配置细节都隐藏了，所以在配置前运行npm run eject，命令执行完后就可以看到整个完整项目了。
2. 接下来文本编辑器打开项目下的config目录下的webpack.config.dev.js,这个文件是作为开发时的webpack配置文件。
3. 配置。
在webpack.config.dev.js中找到exclude追加两行代码，用于加载less和svg文件

module.exports = {
    module: {
        rules: [
            ...
            {
                exclude: [
                  /\.html$/,
                  /\.(js|jsx)$/,
                  /\.css$/,
                  /\.json$/,
                  /\.bmp$/,
                  /\.gif$/,
                  /\.jpe?g$/,
                  /\.png$/,
                  /\.less$/,//追加
                  /\.svg$/,//追加
                ],
                ...
            }
        ]
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

添加按需加载文件处理插件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                ...
                options: {
                  //追加
                  plugins: [
                    ['import', { libraryName: 'antd-mobile', style: true }],
                  ],
                  ...
                },
              },
        ]
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

添加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/my-project-svg-foler'),  // 个人的svg文件目录，如果自己有svg需要在这里配置
                ]
              },
            ...
        ]
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

添加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" },
                    },
                  },
                ],
              }
            ...
        ]
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

最后还有一句，引入postcss-pxtorem模块，用于px转rem

const pxtorem = require('postcss-pxtorem');
 
 1

通过yarn start 启动项目
报错了，首先报的错是说没有合适的svg处理模块，因为项目中一开始就是用了一个react-logo的svg。所以这里我们回到上面第三部中的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需要在这里配置
                ]
              },
            ...
        ]
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

重新启动项目，但是会发现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;
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

6.最后是使用antd-mobile提供的高清解决方案
这里我简单的弄一下，有兴趣的可以查阅官方使用方法
打开src/index.js，编辑代码如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

dcoument.documentElement.style.fontSize = window.innerWidth * 100 / 750 + 'px';//新增
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
 
 1
2
3
4
5
6
7
8
9

添加完之后。重启项目，你会发现并没有什么用。
所以在此打开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: [] }) //新增
                  ],
              },
          },
      ],
  },
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

重启项目，你会发现css单位由px转为了rem