急速构建新React项目

1、配置环境

从nodejs官网下载稳定版本的node，windows下需要配置环境变量后使用xshell、os系统可直接使用ITem2输入

node -v

查看node版本，版本号显示则下载成功

2、安装脚手架

npm install create-react-app -g

注意-g表示将create-react-app安装到全局环境中

当然还要注意有些包只是开发过程中需要，而有些包则是上线后不再需要的因此需要在发布时也用到这些包的时候，一定要将其保存到dependencies中。开发中需要，发布后不需要的可以保存至devDependencies中

3、创建项目

脚手架命令

create-react-app demo

使用全局下的方法创建react项目，如果本地node环境比较混乱，在执行脚手架命令时一直会报

'create-react-app' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

这样的错误。

遇到这种错误不要着急，开发环境混乱可以试着修改环境变量中node的所属目录，确保后期不会出现此种问题。同时还可以使用另一种方法，通过

npx create-react-app demo

来实现项目的构建，npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你通过npm内安装一次，安装后立即删除，不会添加到global里面去。（这个万金油在win系统下好用）

4、进行项目初步运行

npm start

通过react-scripts这个包进行项目的依赖管理，此包在eject之后会消失。

通过npm start执行本地项目，监听端口号可以在node-moudles/react-scripts/script/start.js文件下修改,将默认的3000端口改写为其他端口号。

同时你还可以在当前目录下看到其他文件，通过npm均可运行

npm test

验证本地是否可以运行项目。

npm run build

进行本地运行环境打包，打包内容保存到根目录build文件中，如何部署将在后续springboot微服务的模块中进行记录

npm run eject

进行项目整体配置项的‘’弹射‘’，弹射后不可逆。将全部配置项暴露出来，暴露的webpack配置文件为大型项目多样的需求提供更高级服务。届时会在根目录的config文件夹下生成三个webpack文件。可在其中按照项目需求进行配置项修改

5、导入其他项目（tips）

package.json文件在前面写到是用于保存npm下载过包的一个文件，假如我们想要轻松导入前期开发项目的全部依赖至新项目中，则将package.json文件复制到脚手架生成的新项目中，同时需要将老项目中的config文件夹、script文件夹同时拷贝过来。之后执行

npm install

下载项目所需的所有依赖包。下载完成后运行

npm start

即可

这时你会发现eject消失了，原因是导入的package.json文件是已经eject过的，已经将全部的依赖文件生成并保存在script文件夹下。所以大可不必惊慌直接从老项目中复制粘贴过来即可。

注：建议将yarn-lock.json push到代码仓库，保存eject后的项目依赖版本，为后期项目维护提供版本依据

6、antd引入后样式不生效

前提是需要eject暴露出webpack和定制化的package.json

yarn add babel-plugin-import --save-dev

 "babel": {
    "presets": [
      "react-app"
    "plugins": [
        "import",
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
  }

Module not found: You attempted to import ../../../../Assets/image/contient/yzan.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

	plugins: [
			// Prevents users from importing files from outside of src/ (or node_modules/).
			// This often causes confusion because we only process files within src/ with babel.
			// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
			// please link the files into your node_modules/ and let module-resolution kick in.
			// Make sure your source files are compiled, as they will not be processed in any way.
		注掉	//new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),最后一行注释掉
		],

CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript

"scripts": {
    "eject": "node scripts/eject.js",
    "start": "node scripts/start.js",
    "build": "node -max_old_space_size=4096 scripts/build.js",//添加后
    "test": "node scripts/test.js --env=jsdom"
  },

npm run build

Module not found: You attempted to import ../../../../Assets/image/contient/yzan.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

 plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).