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这种全量加载。所以，对于须要全量加载的依赖，能够尝试使用这种方式引入。