初始化项目

技术选型

1.react
2.webpack
3.antd
4.Less
5.Echarts
...

全局安装 react-create-app 准备工作

  yarn add global react-create-app
  # OR
  npm install -g react-create-app

初始化步骤

1.在本地创建 ReactBigscreen 文件夹， ReactBigscreen /JsonServer 用来做 json-server 备用文件夹
2.在ReactBigscreen 文件夹下执行如下命令

  yarn create react-app react-big-screen --template typescript
  cd react-big-screen
  yarn start

3.能正常启动项目 http://localhost:3000 后进入下一步
4.引入 antd

  yarn add antd

5.引入Less作为css的预编译器

  yarn add less less-loader

6.为antd做按需加载，并引用 Less, 在根目录新建 config-overrides.js文件

  yarn add react-app-rewired customize-cra
  yarn add babel-plugin-import

  const { override, fixBabelImports, addLessLoader } = require('customize-cra')
  module.exports = override(
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    }),
  );

7.修改package.json的启动脚本

/* 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",
}

8.再次启动项目

  yarn start

9.init over!