react项目的服务器环境搭建,搭建React项目工程环境并做自定义配置(React项目实战教程一)...

现在的前端要学的真多，想学React，还得先学webpack。当去看了 webpack 的文档后，感觉要跪了。即便是跟着官方文档，配置到一半已经很没有耐心了有木有？嗯，别怕，React 官方有快速脚手架可以使用，那就是create-react-app。我们可以用这个快速的搭建起一套可用的工程环境。但本教程一教大家如何用 create-react-app 生成一个可配置工程的环境，并做一些基本的工程配置。

create-react-app 官方链接，请点击这里

项目创建

如果之前没有安装过全局 create-react-app 或者当前项目目录没有安装 create-react-app 的话，我们就需要先安装 create-react-app 脚手架。这里我就安装在当前项目目录了。

打开你的终端工具或者 vs code 的终端亦或是 CMD 窗口，然后输入切换到你想要目录，接着 copy 下面的命令，按回车键即可。1

$ yarn add create-react-app

不清楚 yarn 或者没有安装 yarn？点击去这里看官方文档

等待一会儿，安装好了之后，我们就可以用 create-react-app 来创建 react 项目。1

$ npx create-react-app [project-name]

命令窗口噼里啪啦一阵输出之后，项目就创建好了，然后根据窗口提示，我们切换到 [project-name] 的目录，然后使用 yarn eject 命令生成自定义配置文件。

当 npx create-react-app [project-name] 命令执行完毕后，可以观察一下 [project-name] 目录结构。

1

2

3

$ cd [project-name]

$ yarn eject

根据提示，输入 y，之后又一阵噼里啪啦输出后，success！

这个时候，再去观察一下 [project-name] 项目目录结构，你会发现多了一个 config 目录。那这个 config 目录就是包含了一些配置工程的文件。可以看如下图的目录结构：

;

配置

项目安装好了之后，我们就可以使用 yarn start 启动服务了。不过稍加留意的同学会发现当 start 之后，如果 webapck-dev-tool 启动 local server 成功会清掉之前启动的一些配置文件打印信息。如果想要保留，那我们就需要对配置文件进行一些重新配置了。

1、命令行打印信息自定义

命令行上面所打印的信息来源于 webpack，而执行 webpack 的脚本命令在 scripts 目录下面的 js 文件内。因此，我们找到对应命令所执行的文件。在 package.json 文件里面 yarn start 所执行的是 start.js 文件，那么我们就关注 start.js 里面到底哪里有 clear console 的操作。

其实不难发现，命令行上打印的一些信息都来着 webpac dev server，所以我们重点看下 dev server 相关的配置里面有没有 clear console 操作。

1)创建 utils.js 文件

进过一番查找我们发现choosePort和createCompiler里面有，因此我们可以在scripts目录下面新建一个 utils.js 文件，把 choosePort 和 createCompiler 方法 copy 放到 utils.js 文件内，然后对里面的clearConsole进行删除。

注意这两个方面里面的一些引入，要在 utils.js 里面把相关的引用 import 进来，不然后面再 start 会报错的。

看到里面的 console.log 没有？觉得它的文案不满意，那就改改改吧。

处理完之后，我们记得要 export 出去，不然我们要用到 utils.js 这个文件里面的方法，就没办法用啦。

1

2

3

4

module.exports = {

choosePort,

createCompiler

}

2)修改 start.js

utils.js 文件弄好之后，我们来修改 start.js 文件，把原先引入的choosePort和createCompiler两个方法去掉，然后引入我们 utils.js 文件里面的choosePort和createCompiler。

如果没什么意外，这个时候再 yarn start 后，我们就可以看到命令行上面就会一直保留了我们服务启动后的一些打印信息了。

2、自定义域名和端口

配置本地服务的域名和端口的话，我们需要用到 Host 管理工具。Mac 系统的推荐Gas Mask或者SwitchHost，Windows 系统的话可以用SwitchHost或者可以直接修改 Host 文件(当然能用工具最好，方便管理)。

Host 的配置如上图。

下面，我们还要再新建一个 config.json 文件，这个文件可以建在 [project-name] 的一级目录下，然后在 copy 下面的内容到 config.json 文件内，并保存。1

2

3

4

5

{

"Client_PORT": 80,

"Client_PROTOCOL": "http"

}

上面的” Client_* 是可以修改的成自己的，以及这里的域名和端口都可以改成自己想要的。

然后我们再打开 scripts 目录下面的 start.js 文件，引入 config.json，然后修改对应的DEFAULT_PORT、HOST以及protocol的赋值语句。如下图：

搞定之后，再执行 yarn start 看看，这个时候命令行应该会提示你 config.json 不能被 import。因此我们还需要配置 config 目录下面的 paths.js 文件，在appPackageJson后面新增一个字段appConfigJson。1

appConfigJson: resolveApp('config.json'),

保存，然后再修改webpack.config.dev.js，找到new ModuleScopePlugin，修改成如下：1

new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson, paths.appConfigJson]),

当我们使用的文件不在src/目录或者某些地方 import 的文件路径../超出了 src/的目录路径后，会提示你要最好把文件移到 src/目录下面。这个时候修改ModuleScopePlugin就可以解决问题了。

修改并保存 webpack.config.dev.js 后，再次重新 yarn start，这个时候就可以看到浏览器打开了我们配置的域名站点了。