React移动端项目搭建

1、脚手架创建项目 create-react-app project

2、安装craco 相关依赖

npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D

3、配置package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

4、安装相关依赖：craco-less、less、less-loader、lib-flexible、postcss-pxtorem，配置craco.config.js

const CracoLessPlugin = require('craco-less')
const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
    webpack: {
        alias: {
            '@@': pathResolve('.'),
            '@': pathResolve('src'),
            '@assets': pathResolve('src/assets'),
            '@common': pathResolve('src/common'),
            '@components': pathResolve('src/components'),
            '@hooks': pathResolve('src/hooks'),
            '@pages': pathResolve('src/pages'),
            '@store': pathResolve('src/store'),
            '@utils': pathResolve('src/utils')
        }
    },
    babel: {
        plugins: [
            ['@babel/plugin-proposal-decorators', { legacy: true }],
            ['import', {
                libraryName: 'antd-mobile',
                libraryDirectory: "es",
                style: true,
            }],
        ]
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {},
                        javascriptEnabled: true
                    }
                }
            }
        }
    ],
    style: {
        postcss: {
            mode: "extends",
            loaderOptions: {
                postcssOptions: {
                    ident: "postcss",
                    plugins: [
                        [
                            "postcss-pxtorem",
                            {
                                rootValue: 37.5,
                                propList: ["*"],
                            },
                        ],
                    ],
                },
            },
        },
    },
    devServer: {
        client: {
            overlay: false,
        },
    },
}

6、配置jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@@/*": ["./*"],
        "@/*": ["src/*"],
        "@assets/*": ["src/assets/*"],
        "@common/*": ["src/common/*"],
        "@components/*": ["src/components/*"],
        "@hooks/*": ["src/hooks/*"],
        "@pages/*": ["src/pages/*"],
        "@store/*": ["src/store/*"],
        "@utils/*": ["src/utils/*"]
      },
      "experimentalDecorators": true
    },
    "exclude": ["node_modules", "build"]
  }