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别忘了引入