/ts-antd-less-eject-pro

一个eject之后的 typescript-antd 项目，已经配置好 按需加载、redux全家桶、less、装饰器等依赖

Primary LanguageJavaScript

This project was bootstrapped with Create React App.

操作步骤

本项目构建过程

项目初始化

  1. yarn create react-app blog-admin --typescript
  2. cd blog-admin
  3. yarn eject
  4. yarn add antd babel-plugin-import less less-loader react-loadable
  5. webpack.config.js
const cssRegex = /\.(css|less)$/;
  1. webpack.config.js getStyleLoaders 函数 给函数的 loaders 数组增加一个元素 让其调用less-loader解析less
{
  loader:require.resolve('less-loader'),
  options:{
    javascriptEnabled: true    //允许通过js调用antd组件
  }
}
  1. module.exports 中 找到 resolve 属性 在设置他的 alias 对象：
 '@': paths.appSrc,     //通过 @  定位到src   paths 对象里有每个文件的地址引用   可修改
  1. 安装redux yarn add redux react-redux redux-thunk react-router-dom
  2. 安装装饰器依赖 yarn add babel-plugin-transform-decorators-legacy --save-dev
  3. tsconfig.json "compilerOptions"对象中 添加 "experimentalDecorators": true
  4. 根目录下 新建.babelrc文件,注意package.json中与此文件不要有重复声明
{
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ],
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }]
  ]
}

  1. 使用react-router-dom 报错 yarn add @types/react-router-dom

  2. yarn add @babel/plugin-transform-react-jsx

  3. yarn add @babel/plugin-transform-react-jsx-source

  4. yarn add @babel/plugin-transform-react-jsx-self

  5. yarn add @babel-plugin-transform-decorators-legacy

  6. @ 装饰器一直报错 vscode setting "javascript.implicitProjectConfig.experimentalDecorators": true 无效 tsconfig.json experimentalDecorators": true, 也无效 最后 在代码里加//@ts-ignore生效... 浪费时间，(ˉ▽ˉ；)...

//@ts-ignore
@connect(
  state=>state,
  {}
)