React搭建项目遇到的问题记录

1. React修改项目启动的默认端口

默认端口3000，当已经有一个300时，在使用npm start不会像vue一样自动加一，而且会报错警告，需要手动设置端口

在package.json文件找到scripts 中的"start"修改为"set PORT=9999 && node scripts/start.js",

 

2.暴露配置文件及“Remove untracked files, stash or commit any changes, and try again.”报错

在终端运行以下命令就可把config（webpack配置在此）和script文件夹暴露出来

npm run eject

但我在运行时却出现了以下错误

$ npm run eject

> admin-demo@0.1.0 eject C:\Users\Administrator\Desktop\h5\练习\react-demo\admin                                                                                                                                                                                               -demo
> react-scripts eject

NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without                                                                                                                                                                                                ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. (y/N) y
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:

.gitignore
admin-demo/

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! admin-demo@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the admin-demo@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional log                                                                                                                                                                                               ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-03-18T0                                                                                                                                                                                               3_13_45_877Z-debug.log

先把上传一下在运行一遍就可以解决了

 

3.按需引入antd的路径错误配置

由于上面把react的配置文件暴露出来了，所以需要手动去webpack里面配置，官方文档也没具体描述，感觉挺坑的这一块。

首先引入首先按需加载插件bable-plugin-import

cnpm install bable-plugin-import --save-dev 
或者
yarn add babel-plugin-import --save-dev 

然后去webpack.config.js找到babel-loader配置，修改他的options，替换为下面代码

options: {
      plugins:[['import',{
             "libraryName":"antd",
              "style":true
      }]],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
      cacheDirectory: true,
},

最后在页面文件按需引入组件就ok了。还有css别忘了引入