很久没写react项目了，这两天想了解一下react的新特性，创建了一个react的项目，万万没想到，react项目初始化，也能写个文档。

查阅了一下国外的官网和国内的官网，官方稳定版本都是17.2，这个demo就安装17.2版本。

前提： 安装了node.js

安装脚手架create-react-app

create-react-app脚手架是和vue-cli一样的脚手架工具，vue-cli用来创建vue的项目初始化，create-react-app用来创建react项目的初始化。

在安装之前请查看你的npm版本，因为这取决于你将如何安装create-react-app脚手架工具，编写文档时，编者的npm版本是6.14.11，npm 5.2以上可以直接跳转到下一小节:创建项目，如果npm版本<5.2 请到爬坑小集锦查看全局安装方式，但是安装成功后，会报错，建议还是升级npm比较简单。

创建react项目

 npx create-react-app react-demo

注意： 第一行的 npx 不是拼写错误 —— 它是 [npm 5.2+ 附带的 package 运行工具]

安装成功，想查看运行上述命令后，create-react-app是否会自动全局安装，运行create-react-app -V发现报错，没有这样的文件或者目录：

也就是说，npx 只是个包运行工具，不会和预想的一样，运行后自动全局安装。

启动服务

cd react-demo
yarn start

运行以上命令后，出现以下报错：

$ yarn start
yarn run v1.22.10
$ rescripts start
process.env.ASSET_PATH undefined
...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

src\public-path.js
  Line 2:3:  '__webpack_public_path__' is not defined  no-undef

Search for the keywords to learn more about each error.

这，不得不说，react还是老样子，一步三坑~~

继续分析报错原因： '__webpack_public_path__' is not defined no-undef

打开文件夹查看源代码，居然在项目里面看到了微应用乾坤的代码，文件src/public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

文件src/index.js(标红处是乾坤子应用初始化代码)

也就是说，create-react-app创建的项目模板，已经内置了乾坤微应用，对乾坤不了解的请点击链接查看。

排查了一圈源代码，__webpack_public_path__在.rescriptsrc.js有定义，发现是 eslint 校验的问题， webpack_public_path 不是全局变量所导致的，将文件src/public-path.js改写如下。

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

再次运行yarn start,启动项目成功，显示如下：

自此，我们已经成功初始化了r+eact项目。

爬坑小集锦

1. 全局安装create-react-app，创建项目时报错

运行：

yarn global add create-react-app

或

npm install -g create-react-app

安装好了之后，查看一下版本号，看是否安装成功create-react-app -V

按以上方式安装脚手架后，运行 npx create-react-app react-demo 出现报错

You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).

爬到create-react-app官网上看到这么一段话：

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

释义：如果之前通过 npm install -g create-react-app 全局安装过 create-react-app ，我们建议你使用 npm uninstall -g create-react-app 卸载已安装的包，以此保证使用最新版的 npx。

意思是npm5.6已经自带了create-react-app，不需要额外再另外安装，所以建议不要全局安装，采用npx包运行工具初始化项目即可。

内容更新

3月15日又重新创建了新的react应用，但是这次没有内部集成乾坤微应用了？不得其解，这模板还经常变动的？ 第一次运行yarn start已能成功启动服务：

启动后运行界面如下：