用最流行的编程语言构建的 2048

前段时间 React license 的问题闹的沸沸扬扬，搞得 React 社区人心惶惶，好在最终 React 团队听取了社区意见把 license 换成了 MIT。不管 React license 如何，React 都是一个值得好好学习的优秀视图库。

本项目算不上什么大型项目，代码结构却值得一学。

打开package.json文件，可以发现它包含了一大堆开发依赖和依赖，这么一堆依赖，功能基本涵盖了开发过程中需要的几乎所有东西。像css预编译、热更新、代码自动补全、代码检查、自动发布等等。

看一下webpack.config.js这个文件，代码分成了三个部分，分别是开发环境的配置、生产环境的配置和一些公共配置。

开发环境的配置首先用HotModuleReplacementPlugin和NoEmitOnErrorsPlugin两个插件，用于热更新，开发环境，不需要代码检查。

生产环境的配置启用了UglifyJsPlugin，代码混淆压缩，启用了代码检查。

公共配置用到了各种loader，包括babel-loader，这个loader需要用babel.config.js配置。

Babel的配置中，包含了对jsx和typescript的支持，支持编译成es2015的代码，以及sourcemap的使用。

配置完babel，需要配置一个typescript配置文件。

项目中，开发环境的typescript检查并不严格，只检查类型错误，不检查风格错误。

生产环境的检查严格一些，启用了严格模式和类型检查。

开发环境和生产环境的配置不一样。开发环境需要快速响应，不需要太多的检查。生产环境注重稳定性，需要更多的检查。

最后，用tsconfig-paths这个插件，来解决ts编译后路径无法使用的问题。

聊完开发环境的配置，我们来看看项目的代码结构，基本上都是标准的目录结构，包括actions, components, reducers, store等几个目录。

组件目录下的组件，一般都是和状态机相关的组件，这些组件会负责数据的获取和状态的变更。

reducers目录下，是各个组件状态管理的reducer，reducer根据action的状态，来变更组件的状态，把状态集中管理起来。

store目录下是整个应用程序的管理对象，主要负责和UI组件进行交互。

整个游戏的逻辑还是比较简单的，主要分两个部分，一个部分是生成数字，另一个部分是移动数字，实际上是移动方格，方格上显示的数字，会根据移动的方向进行更新。

这个项目和别的实现比，可能并没有什么过人之处，但是对新手来说，还是挺有价值的。

最后给各位留一个小问题：

这个项目中没有使用 Redux，而是使用了 Redux Toolkit，Redux Toolkit 是什么？