React引用新姿势

众所周知，React本身推荐两种引用方法，一种是通过HTML的script标签引入React，另一种是使用例如Create-react-app等脚手架启动大型React应用。前者是将React集成到现有项目最简单的方式，而大多数人在使用React框架的时候，往往选择后者，因为后者更方便扩展文件和组件的规模、使用npm的第三方库。此时，我们需要将React安装在项目的node_modules中，并写入package.json文件的dependence字段，并使用yarn.lock锁住版本。这样，当多人协作完成项目或更换设备初始化代码时都会将所以依赖按照锁定的版本安装，保证项目的正常运行。这是一种很普遍、很常见的用法，具体内容无需赘述。在此，仅介绍一下我们的使用方法。 我们使用script的方式引入React：

然而我们项目中依然使用：

同时我们并不将React安装到项目依赖中。 看到这很多人会问，编辑器不会提示找不到react吗？ 我给出你的答案肯定是不会。 为什么呢？因为我们的脚手架jdwtool做了一步处理。大家都知道，import寻找依赖的机制是从当前项目中的node_module开始，依次往父级查找，最后查找到系统目录，如果在此过程中完成匹配，那查找到此为止。显然，我们引入的react并不会查找到，因为我们在系统目录也并未安装，那么到底怎么查找到的呢？这个就需要tsconfig path来为我们助力了。我们使用tsconfig中的path字段进行路径映射，当项目中无法匹配到依赖时，会按照path中给出的字段进行匹配，直到匹配完成。我们动态生成的path如下：

其中，映射的路径为xyz，先从x开始，直到z匹配完成。这里面包含了我们的jdwtool的安装路径，我们是将React安装到了jdwtool的node_modules下。因此，项目中import react时，可从jdwtool的node_modules下查找到react，保证项目的正常运行。 下面，我们可以看一下我们项目的dependence字段：

从图中可以看到，项目中并不会安装一些通用的依赖，所有通用的依赖都安装到了jdwtool下，这就是我们整体的实现思路。 这么做到底有什么好处呢？

• 一次加载，多处使用。加载一次cdn上的react文件，任何请求该文件的项目都可走缓存，而无需请求。
• 方便升级react版本。大家都知道，react总会给我们带来很多惊喜，尝试新版本总是变的迫不及待。使用这种方法，可以轻松升级react版本，而无需担心重新打包vendor。
• 脚手架安装依赖，项目初始化更快。我们很多的依赖都安装在了脚手架中，那么项目中安装的依赖变的非常少，这使得每个人clone下项目后，无需花费过多的时间等待依赖的安装。
• 脚手架统一升级依赖版本。我们的依赖都安装在脚手架的安装目录下，当我们需要升级依赖版本时，只需要更新脚手架即可。

看到这也许有人会问，假如我们的某个项目不想使用脚手架的依赖怎么办？这个只需要在项目中安装指定版本的依赖即可。 那么我们为什么不将antd使用script的方式引入呢？因为antd我们使用了按需加载，而不像react这种全量加载。因此，对于需要全量加载的依赖，可以尝试使用这种方式引入。