ts模板下craco化配置项的antd4项目（脚手架是create-react-app）

前言：

最近有时间准备为年会提前准备一个纯前端的抽奖系统，看见antd4官方忽然推荐了新的脚手架可配置化方案，就开荒了（当然，这会儿这个插件没啥中文文档，也许后面出了中文文档或者优化了配置设置就不需要这篇文章了）

本文中craco相关的，也就ts+react+webpack+craco下如何配置alias快捷引用菜单、修改默认打包文件夹build

package.json内容:

{
  "name": "react-antd-lottery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.5",
    "antd": "^4.5.2",
    "craco-less": "^1.17.0",
    "less-loader": "^6.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "dev": "craco start",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "./"
}

注：值得注意的是末尾这行

"homepage": "./"

给打包后的index.html的文件引用配置了根目录

一、搭建与配置

重点：ts模板下craco化配置项的create-react-app + antd项目

1.搭建：

yarn 在更新之后，集成了create, 通过yarn create，可以快速启动一个项目。

• yarn create react-app my-app

• yarn create react-native-app my-app

• yarn create next-app my-app

参考:https://segmentfault.com/a/1190000009857965

yarn create react-app react-antd-lottery --template typescript

yarn add react-router-dom @types/react-router-dom  less-loader  antd

 

2.可配置化

craco （一个对 create-react-app 进行自定义配置的社区解决方案）。

这一小段是照着antd4官方说明做的https://ant.design/docs/react/use-with-create-react-app-cn

yarn add @craco/craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  // ...
};

3.自定义主题（配置.less文件的支持）

yarn add craco-less

并修改 craco.config.js文件如下：

const CracoLessPlugin = require('craco-less');
​
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },//不修改主题就注释掉这行
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

注：有看到antd4已经内置了按需引入

4.打包相关

(1)修改打包后的引用路径：

在package.json中添加 "homepage": "./"

(2)修改快捷引用路径

【在webpack与typescript结合使用的情况下】

//craco.config.js中
​
const path = require('path')
module.exports = {
    reactScriptsVersion: "react-scripts",/* (default value) */
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@pages': path.resolve(__dirname, 'src/pages'),
            '@utils': path.resolve(__dirname, 'src/utils')
        }
    },
​
};

​

//除了配置craco.config.js中webpack的alias，也需要修改tsconfig.json如下
  "exclude": [
    "node_modules",
    "dist",
    "build"
  ],
  "extends": "./paths.json"

//照着extends项所配置的路径，在项目根目录创建paths.json内容如下（这里需要注意两边的/*）
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"],
            "@pages/*": ["src/pages/*"],
            "@utils/*": ["src/utils/*"]
        }
    }
}

​

(3)修改打包后的输出文件夹

光看carco官方(github、npm)的例子没法子知道真正该怎么配（至少2020-08-06是这样的，如果照着官方直接整output只会把public打包到指定文件夹，编译后的js和css还是跑到了build）

github:https://github.com/gsoft-inc/craco

npm:https://www.npmjs.com/package/@craco/craco

注：若不放心可以打印这里的webpackConfig和paths

console.log在控制台中都显示了是哪一项里包含了build文件夹

 

 

完整的craco.config.js文件

/* craco.config.js */
const CracoLessPlugin = require('craco-less');
const { when, whenDev, whenProd, whenCI, whenTest, ESLINT_MODES, POSTCSS_MODES } = require("@craco/craco");

const path = require('path')


module.exports = {
    reactScriptsVersion: "react-scripts",/* (default value) */
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@pages': path.resolve(__dirname, 'src/pages'),
            '@utils': path.resolve(__dirname, 'src/utils')
        },
        configure: {
            // output: {
            //     path: path.resolve(__dirname, "dist")
            // },
            //这段代码在2020-08-06的时候仅仅修改public文件的打包目录
        },
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.output.path = path.resolve(__dirname, "dist")//ts和less编译后的文件
            paths.appBuild = path.resolve(__dirname, "dist");//public中的文件
            return webpackConfig;
        }
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        // modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        }
    ],
};