react 默认端口修改

在这里可以讨论React开发技术,插件应用等方面技术

版主: jvip_chen

回复
头像
jvip_chen
社区版主
社区版主
帖子: 136
注册时间: 2019年 1月 5日 13:36 星期六

react 默认端口修改

帖子 jvip_chen » 2019年 10月 16日 14:33 星期三

前言:对package.json的认识
首先我们应该对package.json有一个认识:它包含了整个项目所依赖的模块以及项目的配置信息。下面我们说一下package.json中重要的几个属性:

1、scripts:  通常它指定了npm命令行的缩写,比如start指定了运行npm run start时,要执行的命令。

下面的设置分别指定了start、build、test、eject要执行的命令。

代码: 全选

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
2、dependencies: 指定项目运行所依赖的模块,即:开发版和发布版都需要的依赖。

3、devDependencies:指定项目开发所需要的模块,即:开发版需要但发布版不需要,例如关于测试的、文档类的。


npm install <package_name> --save 表示将这个包名及对应的版本添加到 package.json的 dependencies
npm install <package_name> --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies
点此查看package.json的属性详解

修改react port的方法
执行npm start便可启动项目,所以不管是react怎么升级,找修改端口的位置,我们首先都应该想到看一下package.json里面的配置信息。如果你是先前创建的项目,端口的修改是在scripts文件夹的start.js文件里。但是现在创建的项目里没有了scripts文件夹了,但看package.json(看上图)会发现它放到了依赖里面,在node_modules文件夹里的可以看到react-scripts文件夹,在start.js里可以找到修改端口的代码。如下:

代码: 全选

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

// Tools like Cloud9 rely on this.
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
var compiler;
var handleCompile;

回复