├── src
    ├── components
    │   ├── left
    │   │   ├── left.less
    │   │   └── left.tsx
    │   ├── header
    │   │   ├── header.tsx
    │   │   └── header.less
    │   └── content
    │   │   ├── content.less
    │   │   └── content.tsx
    ├── sessionStorage
    │   └── api.js
    ├── store
    │   ├── index.js
    │   └── reducer.js
    ├── index.tsx
    ├── admin
    │   ├── admin.less
    │   └── admin.tsx
    ├── react-app-env.d.ts
    ├── config.js
    └── serviceWorker.ts
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── config
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── pnpTs.js
    ├── modules.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    └── webpack.config.js
├── .gitignore
├── tsconfig.json
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
├── README.md
└── package.json


/src/components/left/left.less:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EdenStrive/X-admin/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/sessionStorage/api.js:
--------------------------------------------------------------------------------
1 | const setStorage = (key,value) =>{
2 |     sessionStorage.setItem(key, value);
3 | }
4 | 
5 | const getStorage = (key)=>{
6 |     return sessionStorage.getItem(key);
7 | }
8 | 
9 | export { setStorage, getStorage }


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import reducer from './reducer'
3 | 
4 | const store = createStore( reducer
5 |      , window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
6 |      );
7 | 
8 | export default store;


--------------------------------------------------------------------------------
/src/components/header/header.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './header.less';
 3 | 
 4 | const Header: React.FC= () => {
 5 |   return ( 
 6 |    <div className="h_body">
 7 |        <div><em>X-admin</em></div>
 8 |        <div></div>
 9 |    </div>
10 |   );
11 | }
12 | 
13 | export default Header;
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/components/content/content.less:
--------------------------------------------------------------------------------
 1 | .editable-cell {
 2 |   position: relative;
 3 | }
 4 | .editable-cell-value-wrap {
 5 |   padding: 5px 12px;
 6 |   cursor: pointer;
 7 | }
 8 | .editable-row:hover .editable-cell-value-wrap {
 9 |   border: 1px solid #d9d9d9;
10 |   border-radius: 4px;
11 |   padding: 4px 11px;
12 | }
13 | .t_content{
14 |     border: 1px solid #e4e1e1;
15 |     margin-top: 24px;
16 |     width: 90%;
17 |     margin-left: 5%;
18 |     border-radius: 3px;
19 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 9 |     <title>X-admin</title>
10 |   </head>
11 |   <body>
12 |     <div id="root"></div>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './admin/admin';
 4 | import * as serviceWorker from './serviceWorker';
 5 | 
 6 | ReactDOM.render(<App />, document.getElementById('root'));
 7 | 
 8 | // If you want your app to work offline and load faster, you can change
 9 | // unregister() to register() below. Note this comes with some pitfalls.
10 | // Learn more about service workers: https://bit.ly/CRA-PWA
11 | serviceWorker.unregister();
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | 
26 | #
27 | node_modules/
28 | 
29 | #
30 | dist/
31 | 
32 | #
33 | package-lock.json


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "preserve"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/header/header.less:
--------------------------------------------------------------------------------
 1 | .h_body{
 2 |     position: relative;
 3 |     top: 0px;
 4 |     left: 0px;
 5 |     // border:1px solid black;
 6 |     height: 80px;
 7 |     width: 100%;
 8 |     display: flex;
 9 |     flex-direction: row;
10 |     div:nth-child(1){
11 |         width: 230px;
12 |         font-size: 30px;
13 |         // border:1px solid rgb(190, 35, 35);
14 |         text-align: center;
15 |         line-height: 70px;
16 |         color: rgb(255,255,255);
17 |         background: rgb(117, 113, 249);
18 |         min-width: 230px;
19 |     }
20 |     div:nth-child(2){
21 |         // border:10px solid rgb(47, 82, 158);
22 |         width: calc(100vw - 230px);
23 |         min-width: 970px;
24 |         background: rgb(235, 245, 255)
25 |     }
26 | }


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/src/admin/admin.less:
--------------------------------------------------------------------------------
 1 | 
 2 | *{
 3 |     margin: 0px;
 4 |     padding: 0px;
 5 |     border: 0px;
 6 | }
 7 | 
 8 | .father{
 9 |     position: relative;
10 |     width: 100%;
11 |     height: 100%;
12 |     min-width: 1200px;
13 | 
14 |     .headers{
15 |         position: relative;
16 |         top: 0px;
17 |         left: 0px;
18 |         // border:1px solid black;
19 |         height: 80px;
20 |         width: 100%;
21 |     }
22 | }
23 | 
24 | 
25 | .bodys{
26 |     position: relative;
27 |     width: 100%;
28 |     height: 100%;
29 |     display: flex;
30 |     flex-direction: row;
31 |     .left{
32 |         position: relative;
33 |         width: 230px;
34 |         left: 0px;
35 |         min-height: calc(100vh - 80px);
36 |         // border:1px solid red
37 |     }
38 |     .right{
39 |         position: relative;
40 |         height: 100%;
41 |         // border:1px solid green;
42 |         width: calc(100% - 230px);
43 |         min-height: calc(100vh - 80px);
44 |         background-color: rgb(255, 255, 255)
45 |     }
46 | }
47 | 
48 | .xxx{
49 |     font-size: 25px;
50 |     margin-top: 30px;
51 |     margin-left: 20px;
52 | }


--------------------------------------------------------------------------------
/src/admin/admin.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import Header from '../components/header/header'
 3 | import Left from '../components/left/left'
 4 | import store from '../store/index'
 5 | import Content from '../components/content/content'
 6 | import './admin.less';
 7 | 
 8 | const App: React.FC= () => {
 9 |   const [welcome, setWelco] = useState<boolean>(false)
10 | 
11 |   const viewTable = ()=>{
12 |     setWelco(true)
13 |     console.log("最后删除的元素为:",store.getState().delete)
14 |     console.log("最后添加的元素为:",store.getState().add)
15 |   }
16 | 
17 |   store.subscribe(viewTable)
18 | 
19 |   return ( 
20 |     <div className = "father">
21 |       {/* 后台管理头部 */}
22 |       <div className="headers">
23 |         <Header />
24 |       </div>
25 | 
26 |       {/* 后台管理底部 */}
27 |       <div className="bodys">
28 |         
29 |         {/* body左导航 */}
30 |         <div className="left">
31 |           <Left />
32 |         </div>
33 | 
34 |         {/* 内容 */}
35 |         <div className="right">
36 | 
37 |           {welcome ? <Content /> : <p className="xxx">点击左侧导航进行每个表格的新增、编辑与删除</p>}
38 |         </div>
39 | 
40 |       </div>
41 |     </div>
42 |   );
43 | }
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFileName = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFileName}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/src/store/reducer.js:
--------------------------------------------------------------------------------
 1 | //由于同级组件之间传参非常的麻烦，所以此处用redux
 2 | const defaultState = {
 3 |     admin: 0,
 4 |     content:[
 5 |                 [      
 6 |                     {
 7 |                         key: 0
 8 |                     }
 9 |                 ]
10 |             ],
11 |     delete:null,
12 |     add:null
13 | }
14 | 
15 | 
16 | 
17 | 
18 | 
19 | //行为
20 | export default (state = defaultState, action)=>{
21 |     //reducer 可以接受state，但是绝对不能修改state
22 |     const newState = JSON.parse(JSON.stringify(state)) //对数据进行深拷贝
23 | 
24 |     if (action.type == "change_admin") {
25 |         newState.admin = action.value
26 |         if (newState.content[action.value] == undefined) {
27 |             newState.content[action.value] =    [      
28 |                 {
29 |                     key: 0
30 |                 }
31 |             ]
32 |         }
33 |     }else if(action.type == "change_content"){
34 |         newState.content[action.value] = action.content
35 |     }else if(action.type == "change_session"){
36 |         newState.admin = action.value
37 |         newState.content[action.value] = JSON.parse(action.local)
38 |     }else if(action.type == "bug_bug"){
39 |         newState.content[0] = JSON.parse(action.value)
40 |     }else if(action.type == "delete"){
41 |         newState.delete = action.key
42 |     }else if(action.type == "add"){
43 |         newState.add = action.key
44 |     }
45 |     //新的newState会自动替换老的state
46 |     return newState
47 | }


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="node" />
 2 | /// <reference types="react" />
 3 | /// <reference types="react-dom" />
 4 | 
 5 | declare namespace NodeJS {
 6 |   interface ProcessEnv {
 7 |     readonly NODE_ENV: 'development' | 'production' | 'test';
 8 |     readonly PUBLIC_URL: string;
 9 |   }
10 | }
11 | 
12 | declare module '*.bmp' {
13 |   const src: string;
14 |   export default src;
15 | }
16 | 
17 | declare module '*.gif' {
18 |   const src: string;
19 |   export default src;
20 | }
21 | 
22 | declare module '*.jpg' {
23 |   const src: string;
24 |   export default src;
25 | }
26 | 
27 | declare module '*.jpeg' {
28 |   const src: string;
29 |   export default src;
30 | }
31 | 
32 | declare module '*.png' {
33 |   const src: string;
34 |   export default src;
35 | }
36 | 
37 | declare module '*.webp' {
38 |     const src: string;
39 |     export default src;
40 | }
41 | 
42 | declare module '*.svg' {
43 |   import * as React from 'react';
44 | 
45 |   export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
46 | 
47 |   const src: string;
48 |   export default src;
49 | }
50 | 
51 | declare module '*.module.css' {
52 |   const classes: { [key: string]: string };
53 |   export default classes;
54 | }
55 | 
56 | declare module '*.module.scss' {
57 |   const classes: { [key: string]: string };
58 |   export default classes;
59 | }
60 | 
61 | declare module '*.module.sass' {
62 |   const classes: { [key: string]: string };
63 |   export default classes;
64 | }
65 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1
45 | ) {
46 |   // https://github.com/facebook/create-react-app/issues/5210
47 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
48 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
49 | }
50 | 
51 | 
52 | jest.run(argv);
53 | 


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
 1 | const obj = {
 2 |     //左边导航内容
 3 |     sub:[
 4 |         ["sub1","mail","Part One",[
 5 | 
 6 |             [0,"班级"],
 7 |             [1,"水果"]
 8 | 
 9 |         ]],
10 |         ["sub2","appstore","Part Two",[
11 | 
12 |             [2,"工单"],
13 | 
14 |         ]]
15 |     ],
16 | 
17 |     //表格内容
18 |     content:[
19 |         [   
20 |             {
21 |               title: '姓名',
22 |               dataIndex: '姓名',
23 |               width: '30%',
24 |               editable: true,
25 |             },
26 |             {
27 |               title: '年龄',
28 |               dataIndex: '年龄',
29 |               editable: true,
30 |             },
31 |             {
32 |               title: '学号',
33 |               dataIndex: '学号',
34 |               editable: true,
35 |             }
36 |         ],
37 | 
38 |         [   
39 |             {
40 |               title: '果名',
41 |               dataIndex: '果名',
42 |               width: '20%',
43 |               editable: true,
44 |             },
45 |             {
46 |               title: '大小',
47 |               dataIndex: '大小',
48 |               editable: true,
49 |             },
50 |             {
51 |               title: '价格',
52 |               dataIndex: '价格',
53 |               editable: true,
54 |             }
55 |         ],
56 | 
57 |         [   
58 |             {
59 |               title: '名称',
60 |               dataIndex: '名称',
61 |               width: '20%',
62 |               editable: true,
63 |             },
64 |             {
65 |               title: '价格',
66 |               dataIndex: '价格',
67 |               editable: true,
68 |             }
69 |             
70 |         ]
71 | 
72 |        
73 | 
74 |     ]
75 | } 
76 | export default obj


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # X-admin
 2 | 基于React（hook）+Typescript+antd的后台管理系统的脚手架，只需配置文件即可
 3 | 
 4 | 效果预览地址: 
 5 | - [点击这里](http://www.xingwenpeng.cn:8010/)
 6 | 
 7 | 2019-06-24   
 8 |  
 9 |     > * 添加项目整体目录完成 
10 |  
11 | 2019-07-06  
12 |  
13 |     > * 实践react hook搭配antd（Ts写法）
14 |     
15 |     > * 添加配置文件config.js，实现配置文件实现动态增加左侧导航功能
16 |  
17 | 2019-07-08  
18 |  
19 |     > * 基本完成脚手架（后续进行完善）
20 | 
21 | 2019-07-09
22 | 
23 | - [x] 功能已全部实现
24 | - [x] 暴露接口
25 | 
26 | 2019-07-12
27 |  
28 | - [ ] 反馈有bug，解决中(无法及时响应删除的添加的反应，逐条处理)
29 | 
30 | ------
31 | **框架使用：**
32 | 
33 | 环境要求：
34 | 
35 | > * node版本 10+
36 | > * npm版本 6+
37 | 
38 | ```javascript
39 | 1.首先git clone下来
40 | 2.使用脚手架目录打开cmd，输入命令npm install（如果失败请使用管理员权限打开cmd）
41 | 3.在命令行中输入npm start
42 | ```
43 | 
44 | 打开界面：![cmd-markdown-logo](http://i1.cy.com/x/jiemian.jpg)
45 | 
46 | 红色框框处使我们第一个需要配置的地方：
47 | 
48 |     1.打开src目录下面的config.js
49 |     2.进行配置：
50 |     
51 | ![cmd-markdown-logo](http://i1.cy.com/x/peizhi.png)
52 |     
53 |     sub对应的为为左侧导航。content为导航所对应的表格字段
54 |     
55 |     白色箭头所指数组的前三个元素分别对应导航key值，导航的图标，以及导航的名称。
56 |     
57 |     数组第四个元素为数组，对应为导航子元素的key值以及子元素的名称。
58 |     
59 |     注意：每次添加完子元素时。都要在下面content数组中对应的key值中添加相应的表格字段，比如班级的ke     y为0，那就在content数组中0位置添加表格字段。
60 |     
61 |     表格字段可选width，title，以及是否可以被编辑editable
62 |     
63 | ---- 
64 | 
65 |     1.都设置完成后打开界面
66 | ![cmd-markdown-logo](http://i1.cy.com/x/zhanshi.png)
67 | 
68 |     2. 如下图可以添加表格内容，删除内容，直接点击空表格进行编辑（刷新页面不会使数据丢失）
69 |     
70 | ![cmd-markdown-logo](http://i1.cy.com/x/shanchu.png)
71 | 
72 |     3.在admin.tsx中暴露新增数据与删除数据的接口，删除元素为子导航的key+被删除数据的key，添加为被删除数据的key+子导航的key。
73 |     
74 | ![cmd-markdown-logo](http://i1.cy.com/x/jiekou.png)
75 | 
76 | ----
77 |  
78 | 总结：框架还在完善中，有很多需要完善的地方，框架扩展性比较强。都看到这里了，大佬点个start吧
79 | ![cmd-markdown-logo](http://i1.cy.com/x/kule.png)
80 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | const chalk = require('react-dev-utils/chalk');
 7 | 
 8 | /**
 9 |  * Get the baseUrl of a compilerOptions object.
10 |  *
11 |  * @param {Object} options
12 |  */
13 | function getAdditionalModulePaths(options = {}) {
14 |   const baseUrl = options.baseUrl;
15 | 
16 |   // We need to explicitly check for null and undefined (and not a falsy value) because
17 |   // TypeScript treats an empty string as `.`.
18 |   if (baseUrl == null) {
19 |     // If there's no baseUrl set we respect NODE_PATH
20 |     // Note that NODE_PATH is deprecated and will be removed
21 |     // in the next major release of create-react-app.
22 | 
23 |     const nodePath = process.env.NODE_PATH || '';
24 |     return nodePath.split(path.delimiter).filter(Boolean);
25 |   }
26 | 
27 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
28 | 
29 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
30 |   // the default behavior.
31 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
32 |     return null;
33 |   }
34 | 
35 |   // Allow the user set the `baseUrl` to `appSrc`.
36 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
37 |     return [paths.appSrc];
38 |   }
39 | 
40 |   // Otherwise, throw an error.
41 |   throw new Error(
42 |     chalk.red.bold(
43 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
44 |         ' Create React App does not support other values at this time.'
45 |     )
46 |   );
47 | }
48 | 
49 | function getModules() {
50 |   // Check if TypeScript is setup
51 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
52 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
53 | 
54 |   if (hasTsConfig && hasJsConfig) {
55 |     throw new Error(
56 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
57 |     );
58 |   }
59 | 
60 |   let config;
61 | 
62 |   // If there's a tsconfig.json we assume it's a
63 |   // TypeScript project and set up the config
64 |   // based on tsconfig.json
65 |   if (hasTsConfig) {
66 |     config = require(paths.appTsConfig);
67 |     // Otherwise we'll check if there is jsconfig.json
68 |     // for non TS projects.
69 |   } else if (hasJsConfig) {
70 |     config = require(paths.appJsConfig);
71 |   }
72 | 
73 |   config = config || {};
74 |   const options = config.compilerOptions || {};
75 | 
76 |   const additionalModulePaths = getAdditionalModulePaths(options);
77 | 
78 |   return {
79 |     additionalModulePaths: additionalModulePaths,
80 |     hasTsConfig,
81 |   };
82 | }
83 | 
84 | module.exports = getModules();
85 | 


--------------------------------------------------------------------------------
/src/components/left/left.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { Menu, Icon } from 'antd';
 3 | import { getStorage } from '../../sessionStorage/api'
 4 | import obj from '../../config'
 5 | import store from '../../store/index'
 6 | import 'antd/dist/antd.css';
 7 | import './left.less';
 8 | 
 9 | const { SubMenu } = Menu;
10 | const Left: React.FC= () => {
11 | 
12 |     //初始化状态 openKeys为 sub1 同时定义状态为string
13 |     const [ openKeys , setOpenKeys ] = useState<string[]>(["sub1"])
14 |     const [ rootSubmenuKeys, setRoot] = useState<string[]>([]) //切换
15 |     const [ meau , setMeau ] = useState<any[]>([])
16 | 
17 |     //副作用
18 |     const onOpenChange = (openKeys:string[]) =>{
19 |         const latestOpenKey:any = openKeys.find(key => openKeys.indexOf(key) === -1);
20 |         if(rootSubmenuKeys.indexOf(latestOpenKey) === -1){
21 |             //hook特性不需要加花括号
22 |             setOpenKeys(openKeys);
23 |         }else {
24 |             setOpenKeys( 
25 |                 latestOpenKey ? [latestOpenKey] : []
26 |             );
27 |           }
28 |     }
29 | 
30 |     const change_content = (key:any)=>{
31 |         let keys = key.key
32 |         if (getStorage(keys) == undefined) {
33 |             const action = {
34 |               type:"change_admin",
35 |               value:keys
36 |             }
37 |             store.dispatch(action)
38 |         }else{
39 |             const action = {
40 |               type:"change_session",
41 |               value:keys,
42 |               local: getStorage(keys)
43 |             }
44 |             store.dispatch(action)
45 |         }
46 |     }
47 | 
48 |     useEffect(()=>{
49 |         // console.log(obj.sub) //sub就是配置文件中的左边导航
50 |         let sub:any[] = obj.sub
51 |         let total_arr:any[] = []
52 |         let root:any[] = []
53 | 
54 |         for(let id = 0; id < sub.length; id++){
55 |             let child_arr:any[] = []
56 |             let big_key = sub[id][0] //big key
57 |             let big_type = sub[id][1]//big type
58 |             let big_name = sub[id][2]//big name
59 |             let child = sub[id][3]
60 |             for(let id in child){
61 |                 let key = child[id][0]
62 |                 let content = child[id][1]
63 |                 let childs = (<Menu.Item key={key} onClick={change_content.bind(key)}>{content}</Menu.Item>)
64 |                 child_arr.push(childs)
65 |             }
66 |             let part = ( <SubMenu key={big_key} title= { <span>  <Icon type={big_type}/><span>{big_name}</span></span> } >
67 |                             {child_arr}
68 |                         </SubMenu>)
69 |             total_arr.push(part)
70 |             root.push(big_key)
71 |         }
72 |         setRoot(root)
73 |         setMeau(total_arr)
74 |     },[])
75 | 
76 |     return ( 
77 |     <div>
78 |         <Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 230 }}>   
79 |             {meau}
80 |       </Menu>
81 |     </div>
82 |     );
83 | }
84 | 
85 | export default Left;
86 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   appJsConfig: resolveApp('jsconfig.json'),
80 |   yarnLockFile: resolveApp('yarn.lock'),
81 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
82 |   proxySetup: resolveApp('src/setupProxy.js'),
83 |   appNodeModules: resolveApp('node_modules'),
84 |   publicUrl: getPublicUrl(resolveApp('package.json')),
85 |   servedPath: getServedPath(resolveApp('package.json')),
86 | };
87 | 
88 | 
89 | 
90 | module.exports.moduleFileExtensions = moduleFileExtensions;
91 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "ts-react",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.4.3",
  7 |     "@svgr/webpack": "4.1.0",
  8 |     "@types/jest": "24.0.15",
  9 |     "@types/node": "12.0.8",
 10 |     "@types/react": "16.8.20",
 11 |     "@types/react-dom": "16.8.4",
 12 |     "@typescript-eslint/eslint-plugin": "1.6.0",
 13 |     "@typescript-eslint/parser": "1.6.0",
 14 |     "antd": "^3.20.0",
 15 |     "babel-eslint": "10.0.1",
 16 |     "babel-jest": "^24.8.0",
 17 |     "babel-loader": "8.0.5",
 18 |     "babel-plugin-named-asset-import": "^0.3.2",
 19 |     "babel-preset-react-app": "^9.0.0",
 20 |     "camelcase": "^5.2.0",
 21 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 22 |     "css-loader": "2.1.1",
 23 |     "dotenv": "6.2.0",
 24 |     "dotenv-expand": "4.2.0",
 25 |     "eslint": "^5.16.0",
 26 |     "eslint-config-react-app": "^4.0.1",
 27 |     "eslint-loader": "2.1.2",
 28 |     "eslint-plugin-flowtype": "2.50.1",
 29 |     "eslint-plugin-import": "2.16.0",
 30 |     "eslint-plugin-jsx-a11y": "6.2.1",
 31 |     "eslint-plugin-react": "7.12.4",
 32 |     "eslint-plugin-react-hooks": "^1.5.0",
 33 |     "file-loader": "3.0.1",
 34 |     "fs-extra": "7.0.1",
 35 |     "html-webpack-plugin": "4.0.0-beta.5",
 36 |     "identity-obj-proxy": "3.0.0",
 37 |     "is-wsl": "^1.1.0",
 38 |     "jest": "24.7.1",
 39 |     "jest-environment-jsdom-fourteen": "0.1.0",
 40 |     "jest-resolve": "24.7.1",
 41 |     "jest-watch-typeahead": "0.3.0",
 42 |     "mini-css-extract-plugin": "0.5.0",
 43 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 44 |     "pnp-webpack-plugin": "1.2.1",
 45 |     "postcss-flexbugs-fixes": "4.1.0",
 46 |     "postcss-loader": "3.0.0",
 47 |     "postcss-normalize": "7.0.1",
 48 |     "postcss-preset-env": "6.6.0",
 49 |     "postcss-safe-parser": "4.0.1",
 50 |     "react": "^16.8.6",
 51 |     "react-app-polyfill": "^1.0.1",
 52 |     "react-dev-utils": "^9.0.1",
 53 |     "react-dom": "^16.8.6",
 54 |     "redux": "^4.0.1",
 55 |     "resolve": "1.10.0",
 56 |     "sass-loader": "7.1.0",
 57 |     "semver": "6.0.0",
 58 |     "style-loader": "0.23.1",
 59 |     "terser-webpack-plugin": "1.2.3",
 60 |     "ts-pnp": "1.1.2",
 61 |     "typescript": "3.5.2",
 62 |     "url-loader": "1.1.2",
 63 |     "webpack": "4.29.6",
 64 |     "webpack-dev-server": "3.2.1",
 65 |     "webpack-manifest-plugin": "2.0.4",
 66 |     "workbox-webpack-plugin": "4.2.0"
 67 |   },
 68 |   "scripts": {
 69 |     "start": "node scripts/start.js",
 70 |     "build": "node scripts/build.js",
 71 |     "test": "node scripts/test.js"
 72 |   },
 73 |   "eslintConfig": {
 74 |     "extends": "react-app"
 75 |   },
 76 |   "browserslist": {
 77 |     "production": [
 78 |       ">0.2%",
 79 |       "not dead",
 80 |       "not op_mini all"
 81 |     ],
 82 |     "development": [
 83 |       "last 1 chrome version",
 84 |       "last 1 firefox version",
 85 |       "last 1 safari version"
 86 |     ]
 87 |   },
 88 |   "jest": {
 89 |     "collectCoverageFrom": [
 90 |       "src/**/*.{js,jsx,ts,tsx}",
 91 |       "!src/**/*.d.ts"
 92 |     ],
 93 |     "setupFiles": [
 94 |       "react-app-polyfill/jsdom"
 95 |     ],
 96 |     "setupFilesAfterEnv": [],
 97 |     "testMatch": [
 98 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
 99 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
100 |     ],
101 |     "testEnvironment": "jest-environment-jsdom-fourteen",
102 |     "transform": {
103 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
104 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
105 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
106 |     },
107 |     "transformIgnorePatterns": [
108 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
109 |       "^.+\\.module\\.(css|sass|scss)$"
110 |     ],
111 |     "modulePaths": [],
112 |     "moduleNameMapper": {
113 |       "^react-native$": "react-native-web",
114 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
115 |     },
116 |     "moduleFileExtensions": [
117 |       "web.js",
118 |       "js",
119 |       "web.ts",
120 |       "ts",
121 |       "web.tsx",
122 |       "tsx",
123 |       "json",
124 |       "web.jsx",
125 |       "jsx",
126 |       "node"
127 |     ],
128 |     "watchPlugins": [
129 |       "jest-watch-typeahead/filename",
130 |       "jest-watch-typeahead/testname"
131 |     ]
132 |   },
133 |   "babel": {
134 |     "presets": [
135 |       "react-app"
136 |     ]
137 |   },
138 |   "devDependencies": {
139 |     "less": "^3.9.0",
140 |     "less-loader": "^5.0.0"
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 82 |     const urls = prepareUrls(protocol, HOST, port);
 83 |     const devSocket = {
 84 |       warnings: warnings =>
 85 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 86 |       errors: errors =>
 87 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 88 |     };
 89 |     // Create a webpack compiler that is configured with custom messages.
 90 |     const compiler = createCompiler({
 91 |       appName,
 92 |       config,
 93 |       devSocket,
 94 |       urls,
 95 |       useYarn,
 96 |       useTypeScript,
 97 |       webpack,
 98 |     });
 99 |     // Load proxy config
100 |     const proxySetting = require(paths.appPackageJson).proxy;
101 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
102 |     // Serve webpack assets generated by the compiler over a web server.
103 |     const serverConfig = createDevServerConfig(
104 |       proxyConfig,
105 |       urls.lanUrlForConfig
106 |     );
107 |     const devServer = new WebpackDevServer(compiler, serverConfig);
108 |     // Launch WebpackDevServer.
109 |     devServer.listen(port, HOST, err => {
110 |       if (err) {
111 |         return console.log(err);
112 |       }
113 |       if (isInteractive) {
114 |         clearConsole();
115 |       }
116 | 
117 |       // We used to support resolving modules according to `NODE_PATH`.
118 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
119 |       // This lets you use absolute paths in imports inside large monorepos:
120 |       if (process.env.NODE_PATH) {
121 |         console.log(
122 |           chalk.yellow(
123 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
124 |           )
125 |         );
126 |         console.log();
127 |       }
128 | 
129 |       console.log(chalk.cyan('Starting the development server...\n'));
130 |       openBrowser(urls.localUrlForBrowser);
131 |     });
132 | 
133 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
134 |       process.on(sig, function() {
135 |         devServer.close();
136 |         process.exit();
137 |       });
138 |     });
139 |   })
140 |   .catch(err => {
141 |     if (err && err.message) {
142 |       console.log(err.message);
143 |     }
144 |     process.exit(1);
145 |   });
146 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl)
112 |     .then(response => {
113 |       // Ensure service worker exists, and that we really are getting a JS file.
114 |       const contentType = response.headers.get('content-type');
115 |       if (
116 |         response.status === 404 ||
117 |         (contentType != null && contentType.indexOf('javascript') === -1)
118 |       ) {
119 |         // No service worker found. Probably a different app. Reload the page.
120 |         navigator.serviceWorker.ready.then(registration => {
121 |           registration.unregister().then(() => {
122 |             window.location.reload();
123 |           });
124 |         });
125 |       } else {
126 |         // Service worker found. Proceed as normal.
127 |         registerValidSW(swUrl, config);
128 |       }
129 |     })
130 |     .catch(() => {
131 |       console.log(
132 |         'No internet connection found. App is running in offline mode.'
133 |       );
134 |     });
135 | }
136 | 
137 | export function unregister() {
138 |   if ('serviceWorker' in navigator) {
139 |     navigator.serviceWorker.ready.then(registration => {
140 |       registration.unregister();
141 |     });
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware());
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrl;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       console.log(chalk.red('Failed to compile.\n'));
110 |       printBuildError(err);
111 |       process.exit(1);
112 |     }
113 |   )
114 |   .catch(err => {
115 |     if (err && err.message) {
116 |       console.log(err.message);
117 |     }
118 |     process.exit(1);
119 |   });
120 | 
121 | // Create the production build and print the deployment instructions.
122 | function build(previousFileSizes) {
123 |   // We used to support resolving modules according to `NODE_PATH`.
124 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
125 |   // This lets you use absolute paths in imports inside large monorepos:
126 |   if (process.env.NODE_PATH) {
127 |     console.log(
128 |       chalk.yellow(
129 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
130 |       )
131 |     );
132 |     console.log();
133 |   }
134 | 
135 |   console.log('Creating an optimized production build...');
136 | 
137 |   const compiler = webpack(config);
138 |   return new Promise((resolve, reject) => {
139 |     compiler.run((err, stats) => {
140 |       let messages;
141 |       if (err) {
142 |         if (!err.message) {
143 |           return reject(err);
144 |         }
145 |         messages = formatWebpackMessages({
146 |           errors: [err.message],
147 |           warnings: [],
148 |         });
149 |       } else {
150 |         messages = formatWebpackMessages(
151 |           stats.toJson({ all: false, warnings: true, errors: true })
152 |         );
153 |       }
154 |       if (messages.errors.length) {
155 |         // Only keep the first error. Others are often indicative
156 |         // of the same problem, but confuse the reader with noise.
157 |         if (messages.errors.length > 1) {
158 |           messages.errors.length = 1;
159 |         }
160 |         return reject(new Error(messages.errors.join('\n\n')));
161 |       }
162 |       if (
163 |         process.env.CI &&
164 |         (typeof process.env.CI !== 'string' ||
165 |           process.env.CI.toLowerCase() !== 'false') &&
166 |         messages.warnings.length
167 |       ) {
168 |         console.log(
169 |           chalk.yellow(
170 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
171 |               'Most CI servers set it automatically.\n'
172 |           )
173 |         );
174 |         return reject(new Error(messages.warnings.join('\n\n')));
175 |       }
176 | 
177 |       return resolve({
178 |         stats,
179 |         previousFileSizes,
180 |         warnings: messages.warnings,
181 |       });
182 |     });
183 |   });
184 | }
185 | 
186 | function copyPublicFolder() {
187 |   fs.copySync(paths.appPublic, paths.appBuild, {
188 |     dereference: true,
189 |     filter: file => file !== paths.appHtml,
190 |   });
191 | }
192 | 


--------------------------------------------------------------------------------
/src/components/content/content.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { Table, Input, Button, Popconfirm, Form } from 'antd';
  3 | import { setStorage, getStorage } from '../../sessionStorage/api'
  4 | import store from '../../store/index'
  5 | import obj from '../../config'
  6 | import './content.less'
  7 | 
  8 | //Editable方法的参数对象接口
  9 | interface edittable{
 10 |     form:any;
 11 |     index:number;
 12 |     [propName: string]: any;
 13 | }
 14 | 
 15 | let EditableFormRow:any
 16 | const EditableContext = React.createContext(null);
 17 | 
 18 | const EditableRow = ({ form , index, ...props }:edittable) => (
 19 |   <EditableContext.Provider value={form}>
 20 |     <tr {...props} />
 21 |   </EditableContext.Provider>
 22 | );
 23 | 
 24 | EditableFormRow = Form.create()(EditableRow);
 25 | 
 26 | 
 27 | const EditableCell: React.FC= (props) => {
 28 |     
 29 |     //设置状态editing状态为布尔false
 30 |     let input:any
 31 |     const [editing , setEdit] = useState<boolean>(false) 
 32 |     const [form , setForm] = useState<any>(null) 
 33 | 
 34 | 
 35 |     const toggleEdit = () => {
 36 |         //new editings
 37 |         const editings:boolean = !editing;
 38 |         setEdit(editings)
 39 |     };
 40 | 
 41 |     const save = (e:any)=>{
 42 |         const { record, handleSave }:any = props;
 43 |         form.validateFields((error:any, values:any) => {
 44 |             if (error && error[e.currentTarget.id]) {
 45 |               return;
 46 |             }
 47 |             toggleEdit();
 48 |             handleSave({ ...record, ...values });
 49 |         });
 50 |     }
 51 | 
 52 |     const renderCell = (form:any) =>{
 53 |         setForm(form)
 54 |         const { children, dataIndex, record, title }:any = props;
 55 |         const editings = editing;
 56 |         return editings ? (
 57 |         <Form.Item style={{ margin: 0 }}>
 58 |             {form.getFieldDecorator(dataIndex, {
 59 |             rules: [
 60 |                 {
 61 |                 required: true,
 62 |                 message: `${title} is required.`,
 63 |                 },
 64 |             ],
 65 |             initialValue: record[dataIndex],
 66 |             })(<Input ref={node => (input = node)} onPressEnter={save} onBlur={save} />)}
 67 |         </Form.Item>
 68 |         ) : (
 69 |         <div
 70 |             className="editable-cell-value-wrap"
 71 |             style={{ paddingRight: 24 }}
 72 |             onClick={toggleEdit}
 73 |         >
 74 |             {children}
 75 |         </div>
 76 |         );
 77 | 
 78 |     }
 79 |     
 80 |     const {
 81 |         editable,
 82 |         dataIndex,
 83 |         title,
 84 |         record,
 85 |         index,
 86 |         handleSave,
 87 |         children,
 88 |         ...restProps
 89 |       }:any = props;
 90 |     useEffect(()=>{
 91 |         if (editing) {
 92 |             input.focus();
 93 |         }
 94 |     },[editing])
 95 | 
 96 |     return ( 
 97 |         <td {...restProps}>
 98 |         {editable ? (
 99 |           <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>
100 |         ) : (
101 |           children
102 |         )}
103 |       </td>
104 |     );
105 | }
106 | 
107 | 
108 | 
109 | 
110 | 
111 | 
112 | const Content: React.FC= () => {
113 |     // //解决头条数据无法被sessionStorage初始化的问题
114 |     // if (getStorage(0)!== undefined) {
115 |     //   const action = {
116 |     //     type:"bug_bug",
117 |     //     value:getStorage(0)
118 |     //   }
119 |     //   store.dispatch(action)
120 |     // }
121 |     let big_key = store.getState().admin //每个模块对应的key (表格头部字段内容)
122 |     let Big:any = store.getState().content //获取redux中的内容列表
123 |     const [dataSource , setData] = useState<any>(Big[big_key]) //默认初始化进入admin后显示的是key为0时的表格结构
124 |     const [count , setCount] = useState<any>(1)
125 |     const [columnsx , setColu] = useState<any>(obj.content[0])
126 |     //每次更新状态（即 ）
127 |     const changeM = () =>{
128 |       
129 |         big_key = store.getState().admin
130 |         // getStorage(big_key)
131 | 
132 |         Big = store.getState().content
133 |         setStorage(big_key,JSON.stringify(Big[big_key]))
134 |         setColu(obj.content[big_key])
135 |         setData(Big[big_key])
136 |     }
137 |     store.subscribe(changeM)
138 |     let columns:any = [
139 |         ...columnsx, //------------------------------------------------------------------
140 |         {
141 |           title: 'operation',
142 |           dataIndex: 'operation',
143 |           render: (text:any, record:any) =>
144 |             dataSource.length >= 1 ? (
145 |               <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
146 |                 <a href="javascript:;">Delete</a>
147 |               </Popconfirm>
148 |             ) : null,
149 |         },
150 |     ];
151 | 
152 |     const handleDelete =( key:any ) =>{
153 |         const dataSources = [...dataSource];
154 |         let content = dataSources.filter(item => item.key !== key)
155 |         const action1 = {
156 |           type:"delete",
157 |           key:big_key+"-"+key
158 |         }
159 |         store.dispatch(action1)
160 |         const action = {
161 |           type:"change_content",
162 |           value:big_key,
163 |           content:content
164 |         }
165 |         store.dispatch(action)
166 |     }
167 | 
168 |     const handleAdd = () =>{
169 |         const counts = count
170 |         const dataSources = dataSource
171 |         const newData = {
172 |             key: counts
173 |         };
174 |         let content = [...dataSources, newData]
175 |         const action1 = {
176 |           type:"add",
177 |           key:newData.key+"-"+big_key
178 |         }
179 |         store.dispatch(action1)
180 |         const action = {
181 |           type:"change_content",
182 |           value:big_key,
183 |           content:content
184 |         }
185 |         store.dispatch(action)
186 |         setCount(counts+1)
187 |         setStorage("count",counts+1)
188 |     }
189 |     
190 |     const handleSave = (row:any) =>{
191 |         const newData = [...dataSource];
192 |         const index = newData.findIndex(item => row.key === item.key);
193 |         const item = newData[index];
194 |         newData.splice(index, 1, {
195 |         ...item,
196 |         ...row,
197 |         });
198 |         const action = {
199 |           type:"change_content",
200 |           value:big_key,
201 |           content:newData
202 |         }
203 |         store.dispatch(action)
204 |     }
205 | 
206 |     const  dataSources = dataSource;
207 | 
208 |     const components = {
209 |       body: {
210 |         row: EditableFormRow,
211 |         cell: EditableCell,
212 |       },
213 |     };
214 | 
215 |     const columnss = columns.map( (col:any) => {
216 |       if (!col.editable) {
217 |         return col;
218 |       }
219 |       return {
220 |         ...col,
221 |         onCell: (record:any) => ({
222 |           record,
223 |           editable: col.editable,
224 |           dataIndex: col.dataIndex,
225 |           title: col.title,
226 |           handleSave: handleSave,
227 |         }),
228 |       };
229 |     });
230 | 
231 |     //--------------------------------------
232 | 
233 |     useEffect(()=>{
234 |       if (getStorage("count")!==null) {
235 |         setCount(Number(getStorage("count")))
236 |       }
237 |     })
238 |     //--------------------------------------
239 | 
240 |     return ( 
241 |         <div className="t_content">
242 |           <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
243 |             Add a row
244 |           </Button>
245 |           <Table
246 |             components={components}
247 |             rowClassName={() => 'editable-row'}
248 |             bordered
249 |             dataSource={dataSources}
250 |             columns={columnss}
251 |           />
252 |         </div>
253 |     );
254 | }
255 | 
256 | export default Content;
257 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const isWsl = require('is-wsl');
  5 | const path = require('path');
  6 | const webpack = require('webpack');
  7 | const resolve = require('resolve');
  8 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 10 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 11 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 12 | const TerserPlugin = require('terser-webpack-plugin');
 13 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 14 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 15 | const safePostCssParser = require('postcss-safe-parser');
 16 | const ManifestPlugin = require('webpack-manifest-plugin');
 17 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 18 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 19 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 20 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 21 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 22 | const paths = require('./paths');
 23 | const modules = require('./modules');
 24 | const getClientEnvironment = require('./env');
 25 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 26 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 27 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 28 | 
 29 | const postcssNormalize = require('postcss-normalize');
 30 | 
 31 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 32 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 33 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 34 | // makes for a smoother build process.
 35 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 36 | 
 37 | // Check if TypeScript is setup
 38 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 39 | 
 40 | // style files regexes
 41 | const cssRegex = /\.css$/;
 42 | const cssModuleRegex = /\.module\.css$/;
 43 | const sassRegex = /\.(scss|sass)$/;
 44 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 45 | 
 46 | //新增less匹配项
 47 | const lessRegex = /\.less$/;
 48 | const lessModuleRegex = /\.module\.less$/
 49 | 
 50 | // This is the production and development configuration.
 51 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 52 | module.exports = function(webpackEnv) {
 53 |   const isEnvDevelopment = webpackEnv === 'development';
 54 |   const isEnvProduction = webpackEnv === 'production';
 55 | 
 56 |   // Webpack uses `publicPath` to determine where the app is being served from.
 57 |   // It requires a trailing slash, or the file assets will get an incorrect path.
 58 |   // In development, we always serve from the root. This makes config easier.
 59 |   const publicPath = isEnvProduction
 60 |     ? paths.servedPath
 61 |     : isEnvDevelopment && '/';
 62 |   // Some apps do not use client-side routing with pushState.
 63 |   // For these, "homepage" can be set to "." to enable relative asset paths.
 64 |   const shouldUseRelativeAssetPaths = publicPath === './';
 65 | 
 66 |   // `publicUrl` is just like `publicPath`, but we will provide it to our app
 67 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 68 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 69 |   const publicUrl = isEnvProduction
 70 |     ? publicPath.slice(0, -1)
 71 |     : isEnvDevelopment && '';
 72 |   // Get environment variables to inject into our app.
 73 |   const env = getClientEnvironment(publicUrl);
 74 | 
 75 |   // common function to get style loaders
 76 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 77 |     const loaders = [
 78 |       isEnvDevelopment && require.resolve('style-loader'),
 79 |       isEnvProduction && {
 80 |         loader: MiniCssExtractPlugin.loader,
 81 |         options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
 82 |       },
 83 |       {
 84 |         loader: require.resolve('css-loader'),
 85 |         options: cssOptions,
 86 |       },
 87 |       {
 88 |         // Options for PostCSS as we reference these options twice
 89 |         // Adds vendor prefixing based on your specified browser support in
 90 |         // package.json
 91 |         loader: require.resolve('postcss-loader'),
 92 |         options: {
 93 |           // Necessary for external CSS imports to work
 94 |           // https://github.com/facebook/create-react-app/issues/2677
 95 |           ident: 'postcss',
 96 |           plugins: () => [
 97 |             require('postcss-flexbugs-fixes'),
 98 |             require('postcss-preset-env')({
 99 |               autoprefixer: {
100 |                 flexbox: 'no-2009',
101 |               },
102 |               stage: 3,
103 |             }),
104 |             // Adds PostCSS Normalize as the reset css with default options,
105 |             // so that it honors browserslist config in package.json
106 |             // which in turn let's users customize the target behavior as per their needs.
107 |             postcssNormalize(),
108 |           ],
109 |           sourceMap: isEnvProduction && shouldUseSourceMap,
110 |         },
111 |       },
112 |     ].filter(Boolean);
113 |     if (preProcessor) {
114 |       loaders.push({
115 |         loader: require.resolve(preProcessor),
116 |         options: {
117 |           sourceMap: isEnvProduction && shouldUseSourceMap,
118 |         },
119 |       });
120 |     }
121 |     return loaders;
122 |   };
123 | 
124 |   return {
125 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
126 |     // Stop compilation early in production
127 |     bail: isEnvProduction,
128 |     devtool: isEnvProduction
129 |       ? shouldUseSourceMap
130 |         ? 'source-map'
131 |         : false
132 |       : isEnvDevelopment && 'cheap-module-source-map',
133 |     // These are the "entry points" to our application.
134 |     // This means they will be the "root" imports that are included in JS bundle.
135 |     entry: [
136 |       // Include an alternative client for WebpackDevServer. A client's job is to
137 |       // connect to WebpackDevServer by a socket and get notified about changes.
138 |       // When you save a file, the client will either apply hot updates (in case
139 |       // of CSS changes), or refresh the page (in case of JS changes). When you
140 |       // make a syntax error, this client will display a syntax error overlay.
141 |       // Note: instead of the default WebpackDevServer client, we use a custom one
142 |       // to bring better experience for Create React App users. You can replace
143 |       // the line below with these two lines if you prefer the stock client:
144 |       // require.resolve('webpack-dev-server/client') + '?/',
145 |       // require.resolve('webpack/hot/dev-server'),
146 |       isEnvDevelopment &&
147 |         require.resolve('react-dev-utils/webpackHotDevClient'),
148 |       // Finally, this is your app's code:
149 |       paths.appIndexJs,
150 |       // We include the app code last so that if there is a runtime error during
151 |       // initialization, it doesn't blow up the WebpackDevServer client, and
152 |       // changing JS code would still trigger a refresh.
153 |     ].filter(Boolean),
154 |     output: {
155 |       // The build folder.
156 |       path: isEnvProduction ? paths.appBuild : undefined,
157 |       // Add /* filename */ comments to generated require()s in the output.
158 |       pathinfo: isEnvDevelopment,
159 |       // There will be one main bundle, and one file per asynchronous chunk.
160 |       // In development, it does not produce real files.
161 |       filename: isEnvProduction
162 |         ? 'static/js/[name].[contenthash:8].js'
163 |         : isEnvDevelopment && 'static/js/bundle.js',
164 |       // TODO: remove this when upgrading to webpack 5
165 |       futureEmitAssets: true,
166 |       // There are also additional JS chunk files if you use code splitting.
167 |       chunkFilename: isEnvProduction
168 |         ? 'static/js/[name].[contenthash:8].chunk.js'
169 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
170 |       // We inferred the "public path" (such as / or /my-project) from homepage.
171 |       // We use "/" in development.
172 |       publicPath: publicPath,
173 |       // Point sourcemap entries to original disk location (format as URL on Windows)
174 |       devtoolModuleFilenameTemplate: isEnvProduction
175 |         ? info =>
176 |             path
177 |               .relative(paths.appSrc, info.absoluteResourcePath)
178 |               .replace(/\\/g, '/')
179 |         : isEnvDevelopment &&
180 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
181 |     },
182 |     optimization: {
183 |       minimize: isEnvProduction,
184 |       minimizer: [
185 |         // This is only used in production mode
186 |         new TerserPlugin({
187 |           terserOptions: {
188 |             parse: {
189 |               // we want terser to parse ecma 8 code. However, we don't want it
190 |               // to apply any minfication steps that turns valid ecma 5 code
191 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
192 |               // sections only apply transformations that are ecma 5 safe
193 |               // https://github.com/facebook/create-react-app/pull/4234
194 |               ecma: 8,
195 |             },
196 |             compress: {
197 |               ecma: 5,
198 |               warnings: false,
199 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
200 |               // https://github.com/facebook/create-react-app/issues/2376
201 |               // Pending further investigation:
202 |               // https://github.com/mishoo/UglifyJS2/issues/2011
203 |               comparisons: false,
204 |               // Disabled because of an issue with Terser breaking valid code:
205 |               // https://github.com/facebook/create-react-app/issues/5250
206 |               // Pending futher investigation:
207 |               // https://github.com/terser-js/terser/issues/120
208 |               inline: 2,
209 |             },
210 |             mangle: {
211 |               safari10: true,
212 |             },
213 |             output: {
214 |               ecma: 5,
215 |               comments: false,
216 |               // Turned on because emoji and regex is not minified properly using default
217 |               // https://github.com/facebook/create-react-app/issues/2488
218 |               ascii_only: true,
219 |             },
220 |           },
221 |           // Use multi-process parallel running to improve the build speed
222 |           // Default number of concurrent runs: os.cpus().length - 1
223 |           // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
224 |           // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
225 |           parallel: !isWsl,
226 |           // Enable file caching
227 |           cache: true,
228 |           sourceMap: shouldUseSourceMap,
229 |         }),
230 |         // This is only used in production mode
231 |         new OptimizeCSSAssetsPlugin({
232 |           cssProcessorOptions: {
233 |             parser: safePostCssParser,
234 |             map: shouldUseSourceMap
235 |               ? {
236 |                   // `inline: false` forces the sourcemap to be output into a
237 |                   // separate file
238 |                   inline: false,
239 |                   // `annotation: true` appends the sourceMappingURL to the end of
240 |                   // the css file, helping the browser find the sourcemap
241 |                   annotation: true,
242 |                 }
243 |               : false,
244 |           },
245 |         }),
246 |       ],
247 |       // Automatically split vendor and commons
248 |       // https://twitter.com/wSokra/status/969633336732905474
249 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
250 |       splitChunks: {
251 |         chunks: 'all',
252 |         name: false,
253 |       },
254 |       // Keep the runtime chunk separated to enable long term caching
255 |       // https://twitter.com/wSokra/status/969679223278505985
256 |       runtimeChunk: true,
257 |     },
258 |     resolve: {
259 |       // This allows you to set a fallback for where Webpack should look for modules.
260 |       // We placed these paths second because we want `node_modules` to "win"
261 |       // if there are any conflicts. This matches Node resolution mechanism.
262 |       // https://github.com/facebook/create-react-app/issues/253
263 |       modules: ['node_modules', paths.appNodeModules].concat(
264 |         modules.additionalModulePaths || []
265 |       ),
266 |       // These are the reasonable defaults supported by the Node ecosystem.
267 |       // We also include JSX as a common component filename extension to support
268 |       // some tools, although we do not recommend using it, see:
269 |       // https://github.com/facebook/create-react-app/issues/290
270 |       // `web` extension prefixes have been added for better support
271 |       // for React Native Web.
272 |       extensions: paths.moduleFileExtensions
273 |         .map(ext => `.${ext}`)
274 |         .filter(ext => useTypeScript || !ext.includes('ts')),
275 |       alias: {
276 |         // Support React Native Web
277 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
278 |         'react-native': 'react-native-web',
279 |       },
280 |       plugins: [
281 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
282 |         // guards against forgotten dependencies and such.
283 |         PnpWebpackPlugin,
284 |         // Prevents users from importing files from outside of src/ (or node_modules/).
285 |         // This often causes confusion because we only process files within src/ with babel.
286 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
287 |         // please link the files into your node_modules/ and let module-resolution kick in.
288 |         // Make sure your source files are compiled, as they will not be processed in any way.
289 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
290 |       ],
291 |     },
292 |     resolveLoader: {
293 |       plugins: [
294 |         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
295 |         // from the current package.
296 |         PnpWebpackPlugin.moduleLoader(module),
297 |       ],
298 |     },
299 |     module: {
300 |       strictExportPresence: true,
301 |       rules: [
302 |         // Disable require.ensure as it's not a standard language feature.
303 |         { parser: { requireEnsure: false } },
304 | 
305 |         // First, run the linter.
306 |         // It's important to do this before Babel processes the JS.
307 |         {
308 |           test: /\.(js|mjs|jsx|ts|tsx)$/,
309 |           enforce: 'pre',
310 |           use: [
311 |             {
312 |               options: {
313 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
314 |                 eslintPath: require.resolve('eslint'),
315 |                 
316 |               },
317 |               loader: require.resolve('eslint-loader'),
318 |             },
319 |           ],
320 |           include: paths.appSrc,
321 |         },
322 |         {
323 |           // "oneOf" will traverse all following loaders until one will
324 |           // match the requirements. When no loader matches it will fall
325 |           // back to the "file" loader at the end of the loader list.
326 |           oneOf: [
327 |             // "url" loader works like "file" loader except that it embeds assets
328 |             // smaller than specified limit in bytes as data URLs to avoid requests.
329 |             // A missing `test` is equivalent to a match.
330 |             {
331 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
332 |               loader: require.resolve('url-loader'),
333 |               options: {
334 |                 limit: 10000,
335 |                 name: 'static/media/[name].[hash:8].[ext]',
336 |               },
337 |             },
338 |             // Process application JS with Babel.
339 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
340 |             {
341 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
342 |               include: paths.appSrc,
343 |               loader: require.resolve('babel-loader'),
344 |               options: {
345 |                 customize: require.resolve(
346 |                   'babel-preset-react-app/webpack-overrides'
347 |                 ),
348 |                 
349 |                 plugins: [
350 |                   [
351 |                     require.resolve('babel-plugin-named-asset-import'),
352 |                     {
353 |                       loaderMap: {
354 |                         svg: {
355 |                           ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
356 |                         },
357 |                       },
358 |                     },
359 |                   ],
360 |                 ],
361 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
362 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
363 |                 // directory for faster rebuilds.
364 |                 cacheDirectory: true,
365 |                 cacheCompression: isEnvProduction,
366 |                 compact: isEnvProduction,
367 |               },
368 |             },
369 |             // Process any JS outside of the app with Babel.
370 |             // Unlike the application JS, we only compile the standard ES features.
371 |             {
372 |               test: /\.(js|mjs)$/,
373 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
374 |               loader: require.resolve('babel-loader'),
375 |               options: {
376 |                 babelrc: false,
377 |                 configFile: false,
378 |                 compact: false,
379 |                 presets: [
380 |                   [
381 |                     require.resolve('babel-preset-react-app/dependencies'),
382 |                     { helpers: true },
383 |                   ],
384 |                 ],
385 |                 cacheDirectory: true,
386 |                 cacheCompression: isEnvProduction,
387 |                 
388 |                 // If an error happens in a package, it's possible to be
389 |                 // because it was compiled. Thus, we don't want the browser
390 |                 // debugger to show the original code. Instead, the code
391 |                 // being evaluated would be much more helpful.
392 |                 sourceMaps: false,
393 |               },
394 |             },
395 |             // "postcss" loader applies autoprefixer to our CSS.
396 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
397 |             // "style" loader turns CSS into JS modules that inject <style> tags.
398 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
399 |             // to a file, but in development "style" loader enables hot editing
400 |             // of CSS.
401 |             // By default we support CSS Modules with the extension .module.css
402 |             {
403 |               test: cssRegex,
404 |               exclude: cssModuleRegex,
405 |               use: getStyleLoaders({
406 |                 importLoaders: 1,
407 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
408 |               }),
409 |               // Don't consider CSS imports dead code even if the
410 |               // containing package claims to have no side effects.
411 |               // Remove this when webpack adds a warning or an error for this.
412 |               // See https://github.com/webpack/webpack/issues/6571
413 |               sideEffects: true,
414 |             },
415 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
416 |             // using the extension .module.css
417 |             {
418 |               test: cssModuleRegex,
419 |               use: getStyleLoaders({
420 |                 importLoaders: 1,
421 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
422 |                 modules: true,
423 |                 getLocalIdent: getCSSModuleLocalIdent,
424 |               }),
425 |             },
426 |             // Opt-in support for SASS (using .scss or .sass extensions).
427 |             // By default we support SASS Modules with the
428 |             // extensions .module.scss or .module.sass
429 |             {
430 |               test: sassRegex,
431 |               exclude: sassModuleRegex,
432 |               use: getStyleLoaders(
433 |                 {
434 |                   importLoaders: 2,
435 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
436 |                 },
437 |                 'sass-loader'
438 |               ),
439 |               // Don't consider CSS imports dead code even if the
440 |               // containing package claims to have no side effects.
441 |               // Remove this when webpack adds a warning or an error for this.
442 |               // See https://github.com/webpack/webpack/issues/6571
443 |               sideEffects: true,
444 |             },
445 |             // Adds support for CSS Modules, but using SASS
446 |             // using the extension .module.scss or .module.sass
447 |             {
448 |               test: sassModuleRegex,
449 |               use: getStyleLoaders(
450 |                 {
451 |                   importLoaders: 2,
452 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
453 |                   modules: true,
454 |                   getLocalIdent: getCSSModuleLocalIdent,
455 |                 },
456 |                 'sass-loader'
457 |               ),
458 |             },
459 |             {
460 |               test: lessRegex,
461 |               exclude: lessModuleRegex,
462 |               use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), // 注意第二个参数
463 |             },
464 |             {
465 |               test: lessModuleRegex,
466 |               use: getStyleLoaders(
467 |                 {
468 |                   importLoaders: 2,
469 |                   modules: true,
470 |                   getLocalIdent: getCSSModuleLocalIdent,
471 |                 },
472 |                 'less-loader' // 注意第二个参数
473 |               ),
474 |             },
475 |             // "file" loader makes sure those assets get served by WebpackDevServer.
476 |             // When you `import` an asset, you get its (virtual) filename.
477 |             // In production, they would get copied to the `build` folder.
478 |             // This loader doesn't use a "test" so it will catch all modules
479 |             // that fall through the other loaders.
480 |             {
481 |               loader: require.resolve('file-loader'),
482 |               // Exclude `js` files to keep "css" loader working as it injects
483 |               // its runtime that would otherwise be processed through "file" loader.
484 |               // Also exclude `html` and `json` extensions so they get processed
485 |               // by webpacks internal loaders.
486 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
487 |               options: {
488 |                 name: 'static/media/[name].[hash:8].[ext]',
489 |               },
490 |             },
491 |             // ** STOP ** Are you adding a new loader?
492 |             // Make sure to add the new loader(s) before the "file" loader.
493 |           ],
494 |         },
495 |       ],
496 |     },
497 |     plugins: [
498 |       // Generates an `index.html` file with the <script> injected.
499 |       new HtmlWebpackPlugin(
500 |         Object.assign(
501 |           {},
502 |           {
503 |             inject: true,
504 |             template: paths.appHtml,
505 |           },
506 |           isEnvProduction
507 |             ? {
508 |                 minify: {
509 |                   removeComments: true,
510 |                   collapseWhitespace: true,
511 |                   removeRedundantAttributes: true,
512 |                   useShortDoctype: true,
513 |                   removeEmptyAttributes: true,
514 |                   removeStyleLinkTypeAttributes: true,
515 |                   keepClosingSlash: true,
516 |                   minifyJS: true,
517 |                   minifyCSS: true,
518 |                   minifyURLs: true,
519 |                 },
520 |               }
521 |             : undefined
522 |         )
523 |       ),
524 |       // Inlines the webpack runtime script. This script is too small to warrant
525 |       // a network request.
526 |       isEnvProduction &&
527 |         shouldInlineRuntimeChunk &&
528 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
529 |       // Makes some environment variables available in index.html.
530 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
531 |       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
532 |       // In production, it will be an empty string unless you specify "homepage"
533 |       // in `package.json`, in which case it will be the pathname of that URL.
534 |       // In development, this will be an empty string.
535 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
536 |       // This gives some necessary context to module not found errors, such as
537 |       // the requesting resource.
538 |       new ModuleNotFoundPlugin(paths.appPath),
539 |       // Makes some environment variables available to the JS code, for example:
540 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
541 |       // It is absolutely essential that NODE_ENV is set to production
542 |       // during a production build.
543 |       // Otherwise React will be compiled in the very slow development mode.
544 |       new webpack.DefinePlugin(env.stringified),
545 |       // This is necessary to emit hot updates (currently CSS only):
546 |       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
547 |       // Watcher doesn't work well if you mistype casing in a path so we use
548 |       // a plugin that prints an error when you attempt to do this.
549 |       // See https://github.com/facebook/create-react-app/issues/240
550 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
551 |       // If you require a missing module and then `npm install` it, you still have
552 |       // to restart the development server for Webpack to discover it. This plugin
553 |       // makes the discovery automatic so you don't have to restart.
554 |       // See https://github.com/facebook/create-react-app/issues/186
555 |       isEnvDevelopment &&
556 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
557 |       isEnvProduction &&
558 |         new MiniCssExtractPlugin({
559 |           // Options similar to the same options in webpackOptions.output
560 |           // both options are optional
561 |           filename: 'static/css/[name].[contenthash:8].css',
562 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
563 |         }),
564 |       // Generate a manifest file which contains a mapping of all asset filenames
565 |       // to their corresponding output file so that tools can pick it up without
566 |       // having to parse `index.html`.
567 |       new ManifestPlugin({
568 |         fileName: 'asset-manifest.json',
569 |         publicPath: publicPath,
570 |         generate: (seed, files) => {
571 |           const manifestFiles = files.reduce(function(manifest, file) {
572 |             manifest[file.name] = file.path;
573 |             return manifest;
574 |           }, seed);
575 | 
576 |           return {
577 |             files: manifestFiles,
578 |           };
579 |         },
580 |       }),
581 |       // Moment.js is an extremely popular library that bundles large locale files
582 |       // by default due to how Webpack interprets its code. This is a practical
583 |       // solution that requires the user to opt into importing specific locales.
584 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
585 |       // You can remove this if you don't use Moment.js:
586 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
587 |       // Generate a service worker script that will precache, and keep up to date,
588 |       // the HTML & assets that are part of the Webpack build.
589 |       isEnvProduction &&
590 |         new WorkboxWebpackPlugin.GenerateSW({
591 |           clientsClaim: true,
592 |           exclude: [/\.map$/, /asset-manifest\.json$/],
593 |           importWorkboxFrom: 'cdn',
594 |           navigateFallback: publicUrl + '/index.html',
595 |           navigateFallbackBlacklist: [
596 |             // Exclude URLs starting with /_, as they're likely an API call
597 |             new RegExp('^/_'),
598 |             // Exclude URLs containing a dot, as they're likely a resource in
599 |             // public/ and not a SPA route
600 |             new RegExp('/[^/]+\\.[^/]+$'),
601 |           ],
602 |         }),
603 |       // TypeScript type checking
604 |       useTypeScript &&
605 |         new ForkTsCheckerWebpackPlugin({
606 |           typescript: resolve.sync('typescript', {
607 |             basedir: paths.appNodeModules,
608 |           }),
609 |           async: isEnvDevelopment,
610 |           useTypescriptIncrementalApi: true,
611 |           checkSyntacticErrors: true,
612 |           resolveModuleNameModule: process.versions.pnp
613 |             ? `${__dirname}/pnpTs.js`
614 |             : undefined,
615 |           resolveTypeReferenceDirectiveModule: process.versions.pnp
616 |             ? `${__dirname}/pnpTs.js`
617 |             : undefined,
618 |           tsconfig: paths.appTsConfig,
619 |           reportFiles: [
620 |             '**',
621 |             '!**/__tests__/**',
622 |             '!**/?(*.)(spec|test).*',
623 |             '!**/src/setupProxy.*',
624 |             '!**/src/setupTests.*',
625 |           ],
626 |           watch: paths.appSrc,
627 |           silent: true,
628 |           // The formatter is invoked directly in WebpackDevServerUtils during development
629 |           formatter: isEnvProduction ? typescriptFormatter : undefined,
630 |         }),
631 |     ].filter(Boolean),
632 |     // Some libraries import Node modules but don't use them in the browser.
633 |     // Tell Webpack to provide empty mocks for them so importing them works.
634 |     node: {
635 |       module: 'empty',
636 |       dgram: 'empty',
637 |       dns: 'mock',
638 |       fs: 'empty',
639 |       http2: 'empty',
640 |       net: 'empty',
641 |       tls: 'empty',
642 |       child_process: 'empty',
643 |     },
644 |     // Turn off performance processing because we utilize
645 |     // our own hints via the FileSizeReporter
646 |     performance: false,
647 |   };
648 | };
649 | 


--------------------------------------------------------------------------------