安装create-react-app教程及简单配置

1.安装

//my-app为项目名称  因为本文是教程所以就以默认的my-app为例进行安装
npm init react-app my-app

当出现下方图片的这个样子时，就代表我们安装成功了。

我们可以按照其的建议先进入到自己的项目，然后再运行一下，看看项目是否能正常启动，如果不能，我们就需要按需解决其出现的问题。

cd my-app
npm start

2.将项目的配置文件暴露出来

通过查看项目文件列表，我们可以发现，我们找不到该项目的配置文件。

当然，如果我们只是学习一些简单的react语法的话，我们无需修改项目的配置文件。但是，如果我们需要进行一些高级的使用，例如：加载一些webpack插件、babel解析插件、设置别名、本地跨域代理等时，我们就不得不需要对项目的配置文件进行修改。

暴露配置文件的命令为

npm run eject

命令输入后，会出现一个提示信息，询问我们是否要确认操作。当我们输入 y 后，等待即可。

注意：这是一项单向操作，一旦暴露就无法还原恢复！
我们可以看到如下图所示，一些新的文件被抛出创建，我们需要的配置文件就在config文件夹中。

3.自定义配置

3.1区分npm包的开发环境和生产环境

我们可以看到，抛出的package.json中，所有的npm都在生产环境中。如果将来我们要将项目进行打包的话，项目包的体积将会变得很大。因此，我们需要将一些开发才会用到的包提取出来定义。这里就需要大家自己来均衡了，例如：一些babel以及ESlint等包就是开发才会用到的包。

我们需要在package.json中添加这个devDependencies，并将一些npm包存放到这里。如图我进行了简单的分包，将react的特有包放入到生产环境中。

我们将包分开后，先将node_modules删除，再重新安装，以避免分包产生一些问题影响到以后的开发或打包。

重新安装node_modules我们可以使用如下命令

npm i

然后重新运行项目：npm start
当浏览器出现如下页面时，表示项目成功的运行起来了。之前的分包没有出现什么问题。

3.2定制项目配置，并运用

新建一个react.config.js文件，详情可以查考vue-element-admin项目的vue.config.js文件。当然，我只设置一些简单的配置以做演示。

const path = require('path')
module.exports = {resolve: {// 设置别名, 列如用@来代理src文件夹的绝对路径alias: {'@': path.resolve(__dirname, 'src')}},module: {// babel解析规则,例如：如下的解析.less文件rules: [{test: /\.less$/,use: ['style-loader','css-loader',{loader: 'less-loader',options: {lessOptions: {modifyVars: {'primary-color': '#1DA57A','link-color': '#1DA57A','border-radius-base': '2px',},javascriptEnabled: true,}}}]}]},// 这里可以存放要使用的插件plugins: [],//这里配置开发环境,以用来开发时做跨域请求等的设置，详情可以自行百度了解devServer: {port: 3000,open: false,proxy: {'/api': {target: 'http://localhost:3000/',changeOrigin: true,}}}
}

在项目的cofig文件中webpackDevServer.config.js中进行如下配置，以用来设置proxy等配置。

在config的webpack.config.js文件中，可以进行如下的修改。

目前，我们先进行如下的修改，其他需求配置可以慢慢的配置，然后在config文件夹的文件中进行配置。

注意：这个项目不支持异步加载 async import，修饰器@decorator。需要安装babel-plugin-syntax-dynamic-import，babel-plugin-transform-decorators-legacy两个插件

安装create-react-app教程及简单配置相关推荐

如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...