【React】944- create-react-app初探
本文由 IMWeb 社区 imweb.io 授权转载自腾讯内部 KM 论坛,原作者:kingfo。点击阅读原文查看 IMWeb 社区更多精彩文章。
create-react-app是一个react的cli脚手架+构建器,我们可以基于CRA零配置直接上手开发一个react的SPA应用。通过3种方式快速创建一个React SPA应用:
npm init
with initializer (npm 6.1+)npx
with generator (npm 5.2+)yarn create
with initializer (yarn 0.25+)
例如我们新建一个叫my-app的SPA:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src├── App.css├── App.js├── App.test.js├── index.css├── index.js├── logo.svg└── serviceWorker.js
通过添加参数生成ts支持:
npx create-react-app my-app --typescript
# or
yarn create react-app my-app --typescript
当然,如果我们是把一个CRA已经生成的js项目改成支持ts,可以:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest
然后,将.js文件后缀改成.ts重启development server即可。
CRA还能干嘛
CRA除了能帮我们构建出一个React的SPA项目(generator),充当脚手架的作用。还能为我们在项目开发,编译时进行构建,充当builder的作用。可以看到生成的项目中的 package.json
包含很多命令:
react-scripts start
启动开发模式下的一个dev-server,并支持代码修改时的HotReload
react-scripts build
使用webpack进行编译打包,生成生产模式下的所有脚本,静态资源react-scripts test
执行所有测试用例,完成对我们每个模块质量的保证
这里,我们针对start这条线进行追踪,探查CRA实现的原理。入口为 create-react-app/packages/react-scripts/bin/react-scripts.js
,这个脚本会在react-scripts中设置到 package.json
的bin字段中去,也就是说这个package可以作为可执行的nodejs脚本,通过cli方式在nodejs宿主环境中。这个入口脚本非常简单,这里只列出主要的一个 switch
分支:
switch (script) {case 'build':case 'eject':case 'start':case 'test': {const result = spawn.sync('node',nodeArgs.concat(require.resolve('../scripts/' + script)).concat(args.slice(scriptIndex + 1)),{ stdio: 'inherit' });if (result.signal) {if (result.signal === 'SIGKILL') {console.log('The build failed because the process exited too early. ' +'This probably means the system ran out of memory or someone called ' +'`kill -9` on the process.');} else if (result.signal === 'SIGTERM') {console.log('The build failed because the process exited too early. ' +'Someone might have called `kill` or `killall`, or the system could ' +'be shutting down.');}process.exit(1);}process.exit(result.status);break;}default:console.log('Unknown script "' + script + '".');console.log('Perhaps you need to update react-scripts?');console.log('See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases');break;
}
可以看到,当根据不同command,会分别resolve不同的js脚本,执行不同的任务,这里我们继续看 require('../scripts/start')
:
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
因为是开发模式,所以这里把babel,node的环境变量都设置为 development
,然后是全局错误的捕获,这些都是一个cli脚本通常的处理方式:
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {throw err;
});
确保其他的环境变量配置也读进进程了,所以这里会通过 ../config/env
脚本进行初始化:
// Ensure environment variables are read.
require('../config/env');
还有一些预检查,这部分是作为eject之前对项目目录的检查,这里因为eject不在我们范围,直接跳过。然后进入到了我们主脚本的依赖列表:
const fs = require('fs');
const chalk = require('react-dev-utils/chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {choosePort,createCompiler,prepareProxy,prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const configFactory = require('../config/webpack.config');
const createDevServerConfig = require('../config/webpackDevServer.config');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
可以看到,主要的依赖还是webpack,WDS,以及自定义的一些devServer的configuration以及webpack的configuration,可以大胆猜想原理和我们平时使用webpack并没有什么不同。
因为 create-react-appmy-app
之后通过模版生成的项目中入口脚本被放置在src/index.js,而入口html被放置在public/index.html,所以需要对这两个文件进行检查:
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {process.exit(1);
}
下面这部分是涉及C9云部署时的环境变量检查,不在我们考究范围,也直接跳过。react-dev-utils/browsersHelper
是一个浏览器支持的帮助utils,因为在 react-scripts v2
之后必须要提供一个browser list支持列表,不过我们可以在 package.json
中看到,模版项目中已经为我们生成了:
"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]
}
检查完devServer端口后,进入我们核心逻辑执行,这里的主线还是和我们使用webpack方式几乎没什么区别,首先会通过 configFactory
创建出一个webpack的configuration object,然后通过 createDevServerConfig
创建出一个devServer的configuration object,然后传递webpack config实例化一个webpack compiler实例,传递devServer的configuration实例化一个WDS实例开始监听指定的端口,最后通过openBrowser调用我们的浏览器,打开我们的SPA。
其实,整个流程我们看到这里,已经结束了,我们知道WDS和webpack配合,可以进行热更,file changes watching等功能,我们开发时,通过修改源代码,或者样式文件,会被实时监听,然后webpack中的HWR会实时刷新浏览器页面,可以很方便的进行实时调试开发。
const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const useTypeScript = fs.existsSync(paths.appTsConfig);
const urls = prepareUrls(protocol, HOST, port);
const devSocket = {warnings: warnings =>devServer.sockWrite(devServer.sockets, 'warnings', warnings),errors: errors =>devServer.sockWrite(devServer.sockets, 'errors', errors),
};
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler({appName,config,devSocket,urls,useYarn,useTypeScript,webpack,
});
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(proxyConfig,urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {if (err) {return console.log(err);}if (isInteractive) {clearConsole();}// We used to support resolving modules according to `NODE_PATH`.// This now has been deprecated in favor of jsconfig/tsconfig.json// This lets you use absolute paths in imports inside large monorepos:if (process.env.NODE_PATH) {console.log(chalk.yellow('Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'));console.log();}console.log(chalk.cyan('Starting the development server...\n'));openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {process.on(sig, function() {devServer.close();process.exit();});
});
通过 start
命令的追踪,我们知道CRA最终还是通过WDS和webpack进行开发监听的,其实 build
会比 start
更简单,只是在webpack configuration中会进行优化。CRA做到了可以0配置,就能进行react项目的开发,调试,打包。
其实是因为CRA把复杂的webpack config配置封装起来了,把babel plugins预设好了,把开发时会常用到的一个环境检查,polyfill兼容都给开发者做了,所以使用起来会比我们直接使用webpack,自己进行重复的配置信息设置要来的简单很多。
关注我们
IMWeb 团队隶属腾讯公司,是国内最专业的前端团队之一。
我们专注前端领域多年,负责过 QQ 资料、QQ 注册、QQ 群等亿级业务。目前聚焦于在线教育领域,精心打磨 腾讯课堂、企鹅辅导 及 ABCMouse 三大产品。
社区官网:
http://imweb.io/
加入我们:
https://hr.tencent.com/position_detail.php?id=45616
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4. 正则 / 框架 / 算法等 重温系列(16篇全)
5. Webpack4 入门(上)|| Webpack4 入门(下)
6. MobX 入门(上) || MobX 入门(下)
7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章
【React】944- create-react-app初探相关推荐
- Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
最新文章
- 无限互联新浪微博项目(视频)分享
- BCH测试网上出现第一个UTXO证明
- 6.news.php,news.php
- 世界百位首富的共同特质
- 如何摆脱「自我否定」状态
- 生成jsp验证码的代码详解(servlet版)
- c语言程序前言,C语言 程序代码编写规范前言
- android手机 环境变量 文件,【图片】【教程】配置安卓Java环境变量【手机端反编译吧】_百度贴吧...
- postman在线测试_如何选择适合自己的自动化测试工具?
- mui 批量上传图片 php,MUI+Hbuilder之多图片,单图片上传(五)
- ROS学习笔记13(测试一个简单的消息发布和消息订阅)
- 遗传算法求解旅行商问题
- 数组元素的查找,添加,修改,删除
- LongAdder,AtomicIntegerFieldUpdater深入研究
- python画图显示中文_Python绘图实现显示中文
- Wrong namespace. Expected 'com.example.springboot.mapper.DepartmentMapper' but found 'com.sandystar.
- 基于FPGA的密码锁
- 李笑来《自学是门手艺》
- 如何获取安卓手机设备名称(包括用户自定义名称)
- Android SIGABRT的可能原因及开启手机Log日志