../../../../api

今天clone一个新项目，发现类似的路径，这种路径真的是很烦人很烦人。。

给create-react-app创建的项目配置别名

1. 安装插件

npm install react-app-rewired --save-dev
npm install customize-cra --save-dev

 

2.根目录创建config-overrides.js文件，注意名字不要写错，内容如下

const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require("customize-cra");
const path = require('path')


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addWebpackAlias({
    "@": path.resolve(__dirname, 'src')
  })
);

 

3. 修改package.json的scripts部分，如下

"dev": "react-app-rewired start",
"build:prod": "react-app-rewired build"

4.配置ts文件，加了好几个文件，具体我也不知道是哪一个了，时间紧任务重，不一个个的试了，反正弄完肯定行， 全copy上

 

​jsconfig.json​

{

  "compilerOptions": {
    "target": "es6"
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["src/*"],
    },
  },
  "exclude": [
        "node_modules"
    ]
}

 

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./"
  },
  "include": [
    "src",
    "src/**/*",
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

 

typings.d.ts

declare module '*.css';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.html';
declare module '*.webm';

declare module '*.svg' {
  export function ReactComponent(props: React.SVGProps<SVGSVGElement>): React.ReactElement;
  const url: string;
  export default url;
}