用antd脚手架搭建react工作环境

参考文章： Antd Design官方文档

初级配置

创建新应用

$ mkdir demo   //创建空目录
$ cd demo
$ yarn create react-app antd-demo //用yarn初始化一个脚手架并安装各种必要依赖
$ cd antd-demo //进入项目
$ yarn start //启动项目

此时浏览器会访问http://localhost:3000/ 看到界面就算成功了

引入 antd

$ yarn add antd //从yarn安装并引入 antd 

2. 修改 src/App.js 引入 antd 的按钮组件

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

3. 修改 src/App.css 在文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

看到页面中显示一个按钮即为成功

在我自己按照流程走的时候出现的问题：

在创建typescript的时候，出现button没有被定义的报错

控制台报错

可能是由于版本号导致这样的问题，所以通过修改版本号来解决（若以及修改版本号之后问题还没有解决，就将node_modules删除重新下载）

"@types/react": "16.8.8",   //将 package.json 中的这个版本号改成这样
$ npm install --save // 若改完版本号问题没解决 就重新下载node_modules

自动生成的项目目录以及文件解析：

• node_modules: 项目依赖包目录；
• public：公共目录，该目录下的文件都不会被webpack进行加载、解析、打包；通过npm run build进行打包时该项目下的所有文件将会直接被复制到build目录下；
  • favicon.ico：是网站图标（可替换删除）
  • index.html：页面模版，webpack打包后将输出文件引入到该模版内；index.html中通过环境变量 %PUBLIC_URL% 来指向public目录路径
  • manifest.json：PWA将应用添加至桌面的功能的实现依赖与 manifest.json。 通过该文件可以对图标、名称等信息进行配置。
• src：是源码目录（该目录下除了 index.js、registerServiceWorker.js 文件具有一定的意义其余文件都是演示使用，可直接删除）
  • index.js：是整个项目的入口文件
  • registerServiceWorker.js：service worker 是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务； registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的 service worker 只在生产环境中生效，并且该功能只在https下才能有效果
• .gitignore：该文件是 github 过滤文件配置
• README.md：该文件是github项目描述文件
• package.json：定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等数据）。部分依赖模块被隐藏
• yarn.lock：每次通过yarm添加依赖或者更新包版本时 yarn 都会把相关版本信息写入 yarn.lock文件，npm同理

高级配置

需要引入 react-app-rewired 是为了在不暴露配置的情况下修改 webpack配置
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x版本的关系，需要还需要安装 customize-cra。

$ yarn add react-app-rewired customize-cra

/* 修改package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

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

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用bable-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块

至此 搭建基本结束