create-react-app
1.npx create-react-app my-app --typescript
.npm start
在http://localhost:3000下监视文件,文件修改将自动更新,你可以在控制台中看到检测错误
.npm test
在交互监视模式下启动测试运行程序。后面细讲
.npm run build
在生产环境中编译代码,并放在build目录中
能够正确的打包代码,并且优化,压缩,使用hash重命名文件
.npm run eject
注意:这是一个单向操作,一旦你使用eject,那么就不能恢复了
使用说明:如果你对create-react-app这个构建工具和配置项不满意,你可以在任何时候eject,从而导出可配置的模板,这个命令可以移除到项目的单一构建依赖,取而代之的是将配置文件和项目依赖到导入到你的项目中,你可以随意支配他们,之后除了eject命令以外其余的命令都是可用的,这些命令也是可配置的,所以这时候你就可以操作他们了,不得不说这个逼装的可以,不就是变成vue-cli类似了吗,关于react的配置文件,容我日后再总结出来
你不是非要使用这个功能,原来的模板指定的功能在中小项目中有很好的表现,你没有必须使用npm run eject的义务,但是作为
1.2 npm run eject 自定义配置webpack
//create-react-app 4.0以上,不支持全局安装,需要每次都用npx安装最新版,并且已自带配置好热更新 react-refresh
2.建立 src/setupProxy.js 文件,npm 安装 install http-proxy-middleware , 配置成如下:(可配置多个代理)
const {createProxyMiddleware} = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
createProxyMiddleware("/api/**", {
target: "http://localhost:8080/webapp/",
changeOrigin: true
})
);
//可设置多个
// app.use(
// createProxyMiddleware("/fans/**", {
// target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
// changeOrigin: true
// })
// );
};
3.在public/index.html 改标题和图标