├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── README.md
├── config
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    └── webpack.config.js
├── .gitignore
├── src
    ├── index.js
    ├── todo
    │   ├── TodoCount.js
    │   ├── TodoLists.js
    │   ├── TodoItem.js
    │   ├── TodoPanel.js
    │   └── app.js
    ├── css
    │   └── todo.scss
    └── serviceWorker.js
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/funlee/todo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | todo
 2 | ===============
 3 | 预览地址：[todo](http://show.funlee.cn/react-todo/index.html "todo")
 4 | 
 5 | 安装
 6 | ----
 7 | ```bash
 8 | git clone https://github.com/funlee/todo.git
 9 | cd todo
10 | npm install
11 | npm run start
12 | ```
13 | 然后在浏览器里输入：http:localhost:8080 即可访问
14 | 
15 | 主要功能
16 | -------
17 | * Task 增加、删除
18 | * 增加 Task 支持回车（Enter）
19 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './todo/app';
 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: http://bit.ly/CRA-PWA
11 | serviceWorker.unregister();
12 | 


--------------------------------------------------------------------------------
/src/todo/TodoCount.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: funlee
 3 |  * @Email: i@funlee.cn
 4 |  * @Date: 2018-01-18 23:43:45
 5 |  * @Last Modified time: 2018-01-18 23:43:45
 6 |  * @Description: todoCount component 
 7 |  */
 8 | import React, { Component } from 'react';
 9 | 
10 | class TodoCount extends Component {
11 |   render() {
12 |     return (
13 |       <div className="item-acount">
14 |         <span className="did">{this.props.totalCompleteCount}</span>已完成 / <span className="amount">{this.props.totalCount}</span>总数
15 |       </div>
16 |     )
17 |   }
18 | }
19 | export default TodoCount


--------------------------------------------------------------------------------
/src/todo/TodoLists.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: funlee
 3 |  * @Email: i@funlee.cn
 4 |  * @Date: 2018-01-18 22:07:29
 5 |  * @Last Modified time: 2018-01-18 22:07:29
 6 |  * @Description: TodoLists component 
 7 |  */
 8 | import React, { Component } from 'react';
 9 | import TodoItem from './TodoItem';
10 | 
11 | class TodoLists extends Component {
12 |   render() {
13 |     const listItems = this.props.data.map(item => {
14 |       return (
15 |         <TodoItem 
16 |         task={item.task} 
17 |         complete={item.complete} 
18 |         key={item.id} 
19 |         toggleComplete={this.props.toggleComplete}
20 |         deleteTask={this.props.deleteTask}
21 |         taskId={item.id}/>
22 |       )
23 |     })
24 |     return (
25 |       <ul className="todo-lists">
26 |         {listItems}
27 |       </ul>
28 |     )
29 |   }
30 | }
31 | export default TodoLists


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     const assetFilename = JSON.stringify(path.basename(filename));
11 | 
12 |     if (filename.match(/\.svg$/)) {
13 |       return `module.exports = {
14 |         __esModule: true,
15 |         default: ${assetFilename},
16 |         ReactComponent: (props) => ({
17 |           $$typeof: Symbol.for('react.element'),
18 |           type: 'svg',
19 |           ref: null,
20 |           key: null,
21 |           props: Object.assign({}, props, {
22 |             children: ${assetFilename}
23 |           })
24 |         }),
25 |       };`;
26 |     }
27 | 
28 |     return `module.exports = ${assetFilename};`;
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/src/todo/TodoItem.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: funlee
 3 |  * @Email: i@funlee.cn
 4 |  * @Date: 2018-01-18 22:04:01
 5 |  * @Last Modified time: 2018-01-18 22:04:01
 6 |  * @Description: todo item component
 7 |  */
 8 | import React, { Component } from 'react';
 9 | 
10 | class TodoItem extends Component {
11 |   constructor(props) {
12 |     super(props)
13 |     this.toggleComplete = this.toggleComplete.bind(this)
14 |     this.deleteTask = this.deleteTask.bind(this)
15 |   }
16 |   toggleComplete() {
17 |    this.props.toggleComplete(this.props.taskId)
18 |   }
19 |   deleteTask() {
20 |     this.props.deleteTask(this.props.taskId)
21 |   }
22 |   render() {
23 |     return (
24 |       <li className={this.props.complete ? 'active' : ''}>
25 |         <span className="item-checked" onClick={this.toggleComplete}></span>
26 |         <span className="item-detail">{this.props.task}</span>
27 |         <span className="item-delete" onClick={this.deleteTask}>删除</span>
28 |       </li>
29 |     )
30 |   }
31 | }
32 | export default TodoItem


--------------------------------------------------------------------------------
/src/todo/TodoPanel.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: funlee
 3 |  * @Email: i@funlee.cn
 4 |  * @Date: 2018-01-19 00:02:08
 5 |  * @Last Modified time: 2018-01-19 00:02:08
 6 |  * @Description: TodoPanel component
 7 |  */
 8 | import React, { Component } from 'react';
 9 | 
10 | class TodoPanel extends Component {
11 |   constructor(props) {
12 |     super(props)
13 |     this.state = {
14 |       value:''
15 |     }
16 |     this.handleClick = this.handleClick.bind(this)
17 |     this.handleChange = this.handleChange.bind(this)
18 |     this.handleKeyPress = this.handleKeyPress.bind(this)
19 |   }
20 |   handleClick() {
21 |     if (this.state.value.trim() === '') {
22 |       alert('请输入Task！')
23 |       return
24 |     }
25 |     this.props.addTask(this.state.value.trim())
26 |     this.setState({
27 |       value: ''
28 |     })
29 |   }
30 |   handleChange(event) {
31 |     this.setState({
32 |       value: event.target.value
33 |     })
34 |   }
35 |   handleKeyPress(event){
36 |     if(event.keyCode === 13) {
37 |       this.handleClick()
38 |     }
39 |   }
40 |   render() {
41 |     return (
42 |       <div className="panel">
43 |         <p>
44 |           <span>Task</span>
45 |           <input type="text" placeholder="你想做点什么？" value={this.state.value} onChange={this.handleChange} onKeyUp={this.handleKeyPress} />
46 |         </p>
47 |         <p>
48 |           <button onClick={this.handleClick}>Save Task</button>
49 |         </p>
50 |       </div>
51 |     )
52 |   }
53 | }
54 | 
55 | export default TodoPanel


--------------------------------------------------------------------------------
/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
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/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, in coverage mode, explicitly adding `--no-watch`,
42 | // or explicitly running all tests
43 | if (
44 |   !process.env.CI &&
45 |   argv.indexOf('--coverage') === -1 &&
46 |   argv.indexOf('--no-watch') === -1 &&
47 |   argv.indexOf('--watchAll') === -1
48 | ) {
49 |   // https://github.com/facebook/create-react-app/issues/5210
50 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
51 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
52 | }
53 | 
54 | // Jest doesn't have this option so we'll remove it
55 | if (argv.indexOf('--no-watch') !== -1) {
56 |   argv = argv.filter(arg => arg !== '--no-watch');
57 | }
58 | 
59 | 
60 | jest.run(argv);
61 | 


--------------------------------------------------------------------------------
/src/todo/app.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: funlee
 3 |  * @Email: i@funlee.cn
 4 |  * @Date: 2018-01-19 00:36:17
 5 |  * @Last Modified time: 2018-01-19 00:36:17
 6 |  * @Description: todo 
 7 |  */
 8 | import React, { Component } from 'react';
 9 | import '../css/todo.scss'
10 | 
11 | import TodoLists from './TodoLists'
12 | import TodoCount from './TodoCount'
13 | import TodoPanel from './TodoPanel'
14 | 
15 | import playTitle from 'play-title'
16 | 
17 | class App extends Component {
18 |   constructor(props) {
19 |     super(props);
20 |     playTitle()
21 |     this.state = {
22 |       tasks:[
23 |         {'id':'001' ,'task': '打开 github 官网', 'complete': true },
24 |         {'id':'002' ,'task': '搜索关键词 funlee', 'complete': false },
25 |         {'id':'003' ,'task': 'And Then Follow him', 'complete': false }
26 |       ]
27 |     }
28 |     this.handleToggleComplete = this.handleToggleComplete.bind(this)
29 |     this.addTask = this.addTask.bind(this)
30 |     this.deleteTask = this.deleteTask.bind(this)
31 |   }
32 |   // 切换一项任务的状态
33 |   handleToggleComplete(taskId) {
34 |     const { tasks } = this.state
35 |     for(let i in tasks) {
36 |       if(tasks[i].id === taskId) {
37 |         tasks[i].complete = !tasks[i].complete
38 |         break;
39 |       }
40 |     }
41 |     this.setState({ tasks: tasks})
42 |   }
43 |   // 增加一项任务
44 |   addTask(task) {
45 |     const id = new Date().valueOf()
46 |     const { tasks } = this.state
47 |     tasks.unshift({
48 |       id:id,
49 |       task:task,
50 |       complete:false
51 |     })
52 |     this.setState({tasks:tasks})
53 |   }
54 |   // 删除一条任务
55 |   deleteTask(taskId) {
56 |     const { tasks } = this.state
57 |     const data = tasks.filter(item => {
58 |       return item.id !== taskId
59 |     })
60 |     this.setState({ tasks: data })
61 |   }
62 |   render() {
63 |     const totalCount = this.state.tasks.length
64 |     const totalCompleteCount = this.state.tasks.filter(item=> {
65 |       return item.complete === true
66 |     }).length
67 |     return (
68 |       <div className="todo">
69 |         <h1 className="todo-title">Todo List</h1>
70 |         <TodoLists data={this.state.tasks} toggleComplete={this.handleToggleComplete} deleteTask={this.deleteTask}/>
71 |         <TodoCount totalCount={totalCount} totalCompleteCount={totalCompleteCount}/>
72 |         <TodoPanel addTask={this.addTask}/>
73 |       </div>
74 |     )
75 |   }
76 | }
77 | 
78 | export default App


--------------------------------------------------------------------------------
/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 |   yarnLockFile: resolveApp('yarn.lock'),
80 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
81 |   proxySetup: resolveApp('src/setupProxy.js'),
82 |   appNodeModules: resolveApp('node_modules'),
83 |   publicUrl: getPublicUrl(resolveApp('package.json')),
84 |   servedPath: getServedPath(resolveApp('package.json')),
85 | };
86 | 
87 | 
88 | 
89 | module.exports.moduleFileExtensions = moduleFileExtensions;
90 | 


--------------------------------------------------------------------------------
/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": "todo",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.2.2",
  7 |     "@svgr/webpack": "4.1.0",
  8 |     "babel-core": "7.0.0-bridge.0",
  9 |     "babel-eslint": "9.0.0",
 10 |     "babel-jest": "23.6.0",
 11 |     "babel-loader": "8.0.5",
 12 |     "babel-plugin-named-asset-import": "^0.3.1",
 13 |     "babel-preset-react-app": "^7.0.1",
 14 |     "bfj": "6.1.1",
 15 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 16 |     "css-loader": "1.0.0",
 17 |     "dotenv": "6.0.0",
 18 |     "dotenv-expand": "4.2.0",
 19 |     "eslint": "5.12.0",
 20 |     "eslint-config-react-app": "^3.0.7",
 21 |     "eslint-loader": "2.1.1",
 22 |     "eslint-plugin-flowtype": "2.50.1",
 23 |     "eslint-plugin-import": "2.14.0",
 24 |     "eslint-plugin-jsx-a11y": "6.1.2",
 25 |     "eslint-plugin-react": "7.12.4",
 26 |     "file-loader": "2.0.0",
 27 |     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
 28 |     "fs-extra": "7.0.1",
 29 |     "html-webpack-plugin": "4.0.0-alpha.2",
 30 |     "identity-obj-proxy": "3.0.0",
 31 |     "jest": "23.6.0",
 32 |     "jest-pnp-resolver": "1.0.2",
 33 |     "jest-resolve": "23.6.0",
 34 |     "jest-watch-typeahead": "^0.2.1",
 35 |     "mini-css-extract-plugin": "0.5.0",
 36 |     "node-sass": "^4.11.0",
 37 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 38 |     "pnp-webpack-plugin": "1.2.1",
 39 |     "postcss-flexbugs-fixes": "4.1.0",
 40 |     "postcss-loader": "3.0.0",
 41 |     "postcss-preset-env": "6.5.0",
 42 |     "postcss-safe-parser": "4.0.1",
 43 |     "prop-types": "^15.7.2",
 44 |     "react": "^16.8.3",
 45 |     "react-app-polyfill": "^0.2.1",
 46 |     "react-dev-utils": "^7.0.3",
 47 |     "react-dom": "^16.8.3",
 48 |     "resolve": "1.10.0",
 49 |     "sass-loader": "7.1.0",
 50 |     "style-loader": "0.23.1",
 51 |     "terser-webpack-plugin": "1.2.2",
 52 |     "url-loader": "1.1.2",
 53 |     "webpack": "4.28.3",
 54 |     "webpack-dev-server": "3.1.14",
 55 |     "webpack-manifest-plugin": "2.0.4",
 56 |     "workbox-webpack-plugin": "3.6.3"
 57 |   },
 58 |   "scripts": {
 59 |     "start": "node scripts/start.js",
 60 |     "build": "node scripts/build.js",
 61 |     "test": "node scripts/test.js"
 62 |   },
 63 |   "eslintConfig": {
 64 |     "extends": "react-app"
 65 |   },
 66 |   "browserslist": [
 67 |     ">0.2%",
 68 |     "not dead",
 69 |     "not ie <= 11",
 70 |     "not op_mini all"
 71 |   ],
 72 |   "devDependencies": {
 73 |     "babel-plugin-transform-decorators-legacy": "^1.3.5",
 74 |     "mobx": "^5.9.0",
 75 |     "mobx-react": "^5.4.3",
 76 |     "play-title": "^1.0.4",
 77 |     "system.global": "^2.0.0"
 78 |   },
 79 |   "jest": {
 80 |     "collectCoverageFrom": [
 81 |       "src/**/*.{js,jsx,ts,tsx}",
 82 |       "!src/**/*.d.ts"
 83 |     ],
 84 |     "resolver": "jest-pnp-resolver",
 85 |     "setupFiles": [
 86 |       "react-app-polyfill/jsdom"
 87 |     ],
 88 |     "testMatch": [
 89 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
 90 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
 91 |     ],
 92 |     "testEnvironment": "jsdom",
 93 |     "testURL": "http://localhost",
 94 |     "transform": {
 95 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
 96 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 97 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 98 |     },
 99 |     "transformIgnorePatterns": [
100 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
101 |       "^.+\\.module\\.(css|sass|scss)$"
102 |     ],
103 |     "moduleNameMapper": {
104 |       "^react-native$": "react-native-web",
105 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
106 |     },
107 |     "moduleFileExtensions": [
108 |       "web.js",
109 |       "js",
110 |       "web.ts",
111 |       "ts",
112 |       "web.tsx",
113 |       "tsx",
114 |       "json",
115 |       "web.jsx",
116 |       "jsx",
117 |       "node"
118 |     ],
119 |     "watchPlugins": [
120 |       "C:\\Users\\win10\\Desktop\\hooks\\test-hooks\\node_modules\\jest-watch-typeahead\\filename.js",
121 |       "C:\\Users\\win10\\Desktop\\hooks\\test-hooks\\node_modules\\jest-watch-typeahead\\testname.js"
122 |     ]
123 |   },
124 |   "babel": {
125 |     "presets": [
126 |       "react-app"
127 |     ]
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/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('http://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explictly 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 urls = prepareUrls(protocol, HOST, port);
 82 |     // Create a webpack compiler that is configured with custom messages.
 83 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 84 |     // Load proxy config
 85 |     const proxySetting = require(paths.appPackageJson).proxy;
 86 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 87 |     // Serve webpack assets generated by the compiler over a web server.
 88 |     const serverConfig = createDevServerConfig(
 89 |       proxyConfig,
 90 |       urls.lanUrlForConfig
 91 |     );
 92 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 93 |     // Launch WebpackDevServer.
 94 |     devServer.listen(port, HOST, err => {
 95 |       if (err) {
 96 |         return console.log(err);
 97 |       }
 98 |       if (isInteractive) {
 99 |         clearConsole();
100 |       }
101 |       console.log(chalk.cyan('Starting the development server...\n'));
102 |       openBrowser(urls.localUrlForBrowser);
103 |     });
104 | 
105 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
106 |       process.on(sig, function() {
107 |         devServer.close();
108 |         process.exit();
109 |       });
110 |     });
111 |   })
112 |   .catch(err => {
113 |     if (err && err.message) {
114 |       console.log(err.message);
115 |     }
116 |     process.exit(1);
117 |   });
118 | 


--------------------------------------------------------------------------------
/src/css/todo.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @Author: funlee
  3 |  * @Email: i@funlee.cn
  4 |  * @Date: 2018-01-18 21:18:20
  5 |  * @Last Modified time: 2018-01-18 21:18:20
  6 |  * @Description: react todo style 
  7 |  */
  8 | 
  9 | * {
 10 |     margin: 0;
 11 |     padding: 0;
 12 | }
 13 | 
 14 | html,
 15 | body {
 16 |     width: 100%;
 17 |     height: 100%;
 18 |     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 19 |     font-size: 16px;
 20 |     line-height: 1.42857143;
 21 |     color: #333;
 22 | }
 23 | 
 24 | ul,
 25 | li {
 26 |     list-style: none;
 27 | }
 28 | 
 29 | .todo {
 30 |     width: 100%;
 31 |     max-width: 768px;
 32 |     margin: 20px auto;
 33 |     border: 1px solid #e3e3e3;
 34 |     border-radius: 4px;
 35 |     background: #f5f5f5;
 36 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
 37 |     box-sizing: border-box;
 38 |     padding: 20px;
 39 |     .todo-title {
 40 |         text-align: center;
 41 |     }
 42 |     .todo-lists {
 43 |         background: #fff;
 44 |         border-radius: 4px;
 45 |         li {
 46 |             position: relative;
 47 |             padding: 6px 15px;
 48 |             border-bottom: 1px solid #cdcdcd;
 49 |             &:first-child {
 50 |                 border-radius: 4px 4px 0 0;
 51 |             }
 52 |             &:last-child {
 53 |                 border: none;
 54 |                 border-radius: 0 0 4px 4px;
 55 |             }
 56 |             .item-checked {
 57 |                 display: inline-block;
 58 |                 position: absolute;
 59 |                 top: 50%;
 60 |                 transform: translateY(-50%);
 61 |                 cursor: pointer;
 62 |                 left: 20px;
 63 |                 width: 16px;
 64 |                 height: 16px;
 65 |                 border-radius: 50%;
 66 |                 border: 1px solid #cdcdcd;
 67 |             }
 68 |             &.active {
 69 |                 color: #3c763d;
 70 |                 background: #dff0d8;
 71 |                 text-decoration: line-through;
 72 |                 .item-checked {
 73 |                     &:before {
 74 |                         content: "";
 75 |                         display: inline-block;
 76 |                         position: absolute;
 77 |                         width: 80%;
 78 |                         height: 80%;
 79 |                         border-radius: 50%;
 80 |                         background: #337ab7;
 81 |                         top: 50%;
 82 |                         left: 50%;
 83 |                         transform: translate(-50%, -50%);
 84 |                     }
 85 |                 }
 86 |             }
 87 |             .item-detail {
 88 |                 text-indent: 40px;
 89 |                 display: block;
 90 |                 width: 100%;
 91 |             }
 92 |             .item-delete {
 93 |                 position: absolute;
 94 |                 top: 50%;
 95 |                 right: -20px;
 96 |                 opacity: 0;
 97 |                 transition: all 1s;
 98 |                 transform: translateY(-50%);
 99 |                 cursor: pointer;
100 |                 display: inline-block;
101 |                 font-size: 14px;
102 |             }
103 |             &:hover {
104 |                 .item-delete {
105 |                     right: 20px;
106 |                     opacity: 1;
107 |                 }
108 |             }
109 |         }
110 |     }
111 |     .item-acount {
112 |         margin-top: 10px;
113 |     }
114 |     .panel {
115 |         border-top: 1px solid #cdcdcd;
116 |         margin-top: 20px;
117 |         padding-top: 20px;
118 |         p {
119 |             display: flex;
120 |             justify-content: flex-end;
121 |         }
122 |         span {
123 |             display: inline-block;
124 |             font-weight: bold;
125 |             width: 20%;
126 |             text-align: center;
127 |         }
128 |         input {
129 |             flex: 1;
130 |             height: 34px;
131 |             padding: 6px 12px;
132 |             background: #fff;
133 |             border: 1px solid #ccc;
134 |             border-radius: 4px;
135 |             outline: none;
136 |             &:focus {
137 |                 border-color: #66afe9;
138 |                 outline: 0;
139 |                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
140 |             }
141 |         }
142 |         button {
143 |             display: inline-block;
144 |             border-radius: 4px;
145 |             padding: 6px 10px;
146 |             background-color: #337ab7;
147 |             color: #fff;
148 |             text-align: center;
149 |             margin-top: 30px;
150 |             cursor: pointer;
151 |             outline: none;
152 |             border-width: 0;
153 |             font-size: 16px;
154 |         }
155 |     }
156 | }


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  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 http://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 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/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 bfj = require('bfj');
 23 | const configFactory = require('../config/webpack.config');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // Generate configuration
 52 | const config = configFactory('production');
 53 | 
 54 | // We require that you explicitly set browsers and do not fall back to
 55 | // browserslist defaults.
 56 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 57 | checkBrowsers(paths.appPath, isInteractive)
 58 |   .then(() => {
 59 |     // First, read the current file sizes in build directory.
 60 |     // This lets us display how much they changed later.
 61 |     return measureFileSizesBeforeBuild(paths.appBuild);
 62 |   })
 63 |   .then(previousFileSizes => {
 64 |     // Remove all content but keep the directory so that
 65 |     // if you're in it, you don't end up in Trash
 66 |     fs.emptyDirSync(paths.appBuild);
 67 |     // Merge with the public folder
 68 |     copyPublicFolder();
 69 |     // Start the webpack build
 70 |     return build(previousFileSizes);
 71 |   })
 72 |   .then(
 73 |     ({ stats, previousFileSizes, warnings }) => {
 74 |       if (warnings.length) {
 75 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 76 |         console.log(warnings.join('\n\n'));
 77 |         console.log(
 78 |           '\nSearch for the ' +
 79 |             chalk.underline(chalk.yellow('keywords')) +
 80 |             ' to learn more about each warning.'
 81 |         );
 82 |         console.log(
 83 |           'To ignore, add ' +
 84 |             chalk.cyan('// eslint-disable-next-line') +
 85 |             ' to the line before.\n'
 86 |         );
 87 |       } else {
 88 |         console.log(chalk.green('Compiled successfully.\n'));
 89 |       }
 90 | 
 91 |       console.log('File sizes after gzip:\n');
 92 |       printFileSizesAfterBuild(
 93 |         stats,
 94 |         previousFileSizes,
 95 |         paths.appBuild,
 96 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 97 |         WARN_AFTER_CHUNK_GZIP_SIZE
 98 |       );
 99 |       console.log();
100 | 
101 |       const appPackage = require(paths.appPackageJson);
102 |       const publicUrl = paths.publicUrl;
103 |       const publicPath = config.output.publicPath;
104 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
105 |       printHostingInstructions(
106 |         appPackage,
107 |         publicUrl,
108 |         publicPath,
109 |         buildFolder,
110 |         useYarn
111 |       );
112 |     },
113 |     err => {
114 |       console.log(chalk.red('Failed to compile.\n'));
115 |       printBuildError(err);
116 |       process.exit(1);
117 |     }
118 |   )
119 |   .catch(err => {
120 |     if (err && err.message) {
121 |       console.log(err.message);
122 |     }
123 |     process.exit(1);
124 |   });
125 | 
126 | // Create the production build and print the deployment instructions.
127 | function build(previousFileSizes) {
128 |   console.log('Creating an optimized production build...');
129 | 
130 |   let compiler = webpack(config);
131 |   return new Promise((resolve, reject) => {
132 |     compiler.run((err, stats) => {
133 |       let messages;
134 |       if (err) {
135 |         if (!err.message) {
136 |           return reject(err);
137 |         }
138 |         messages = formatWebpackMessages({
139 |           errors: [err.message],
140 |           warnings: [],
141 |         });
142 |       } else {
143 |         messages = formatWebpackMessages(
144 |           stats.toJson({ all: false, warnings: true, errors: true })
145 |         );
146 |       }
147 |       if (messages.errors.length) {
148 |         // Only keep the first error. Others are often indicative
149 |         // of the same problem, but confuse the reader with noise.
150 |         if (messages.errors.length > 1) {
151 |           messages.errors.length = 1;
152 |         }
153 |         return reject(new Error(messages.errors.join('\n\n')));
154 |       }
155 |       if (
156 |         process.env.CI &&
157 |         (typeof process.env.CI !== 'string' ||
158 |           process.env.CI.toLowerCase() !== 'false') &&
159 |         messages.warnings.length
160 |       ) {
161 |         console.log(
162 |           chalk.yellow(
163 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
164 |               'Most CI servers set it automatically.\n'
165 |           )
166 |         );
167 |         return reject(new Error(messages.warnings.join('\n\n')));
168 |       }
169 | 
170 |       const resolveArgs = {
171 |         stats,
172 |         previousFileSizes,
173 |         warnings: messages.warnings,
174 |       };
175 |       if (writeStatsJson) {
176 |         return bfj
177 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
178 |           .then(() => resolve(resolveArgs))
179 |           .catch(error => reject(new Error(error)));
180 |       }
181 | 
182 |       return resolve(resolveArgs);
183 |     });
184 |   });
185 | }
186 | 
187 | function copyPublicFolder() {
188 |   fs.copySync(paths.appPublic, paths.appBuild, {
189 |     dereference: true,
190 |     filter: file => file !== paths.appHtml,
191 |   });
192 | }
193 | 


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


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