React-demo

2024-01-07 18:25:56

1、配置jsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "baseUrl": "./",
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "jsx": "preserve",
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    }
}

2、在react 项目中进行webpack 配置src 的别名为@

  • react 4 版本:npm install @craco/craco
  • react 5 版本:npm install @craco/craco@alpha -D
  • 创建craco.config.js
  • const path = require('path')
    
    const resolve = pathname => path.resolve(__dirname, pathname)
    module.exports = {
      webpack: {
        // 配置 src 的路径别名为@
        alias: {
          // "@": path.resolve(__dirname, "src"),
          "@": resolve("src"),
          "components": resolve("src/components"),
          "utils": resolve("src/utils")
        }
      }
    }
  • ?配置package.json
  •   "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
      },

3、在react 项目中进行webpack 配置less

  • 对于craco V7 版本:npm install craco-less@2.1.0-alpha.0
  • 对于craco 之前版本: npm install craco-less
  • const CracoLessPlugin = require('craco-less');
    
    module.exports = {
      // less
      plugins: [
        {
          plugin: CracoLessPlugin,
        }
      ],
    }

文章来源:https://blog.csdn.net/qq_50829019/article/details/135152534
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。