携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情。
探索 Create React App
参考：《React 全家桶 前端开发与实例详解》
通常情况下，我们会使用 JavaScript 打包工具来编写模块化的 ES6 JavaScript。在 React 社区，推荐使用 Webpack 驱动，但是其设置和配置的复杂性会让 Web 开发者感到苦难，因此 React 核心团队创建了 Create React App 项目来解决这个问题。
安装
npm i -g create-react-app
创建
create-react-app heart-webpack
该命令会创建新的 React 应用程序，包括创建模版文件、配置“黑盒”的 Webpack 设置、安装依赖项等。
- .git/ 项目里 git 目录
- .gitignore git 管理中应忽视的文件
- node_modules/ 依赖项
- package-lock.json 锁定依赖项的版本
- package.json 指定项目的依赖项
- public/ 打包后的生产文件
- README.md 类似于项目说明
- src/ 源代码
package.json
通过 package.json，可以观察项目里的依赖关系和脚本定义。
{
"name": "heart-webpack",
"version": "0.1.0",
"private": true,
"dependencies": {
...
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
react-scripts是让一切正常工作的引擎，在 scripts 中使用它指定了项目启动、构建的命令eject命令可以将react-scripts的内部结构迁移到自己的项目中，以便根据喜好配置
react和react-dom提供了 React API 以及相关的特性
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
import 语句是 ES6 模块的导入语法。
- Webpack 会根据
from后面的'react'、'react-dom/client'来索引package.json中指定的npm包。 - 对于非 JavaScript 文件，也可以使用
import语句引入。Webpack 让我们可以使用它引入（指定）所有的依赖项。路径前面的./会告诉 Webpack 这是本地文件，而不是npm包。 App组件位于专属的App.js中，有自己的依赖关系，并在文件底部制定了导出，是一个 ES6 模块。
import logo from './logo.svg';
import './App.css';
function App() {
return (
...
);
}
export default App;
bundle.js
使用 npm run start 启动项目后，观察网页源代码，我们可以发现在 head 标签的底部有一个 script 标签，该标签引入了一个 bundle.js。
<script defer src="/static/js/bundle.js"></script>
源代码中没有对 bundle.js 的引用，那么它是从哪来的？
bundle.js 是 Webpack 开发服务器附加上去的。Webpack 服务器会实时生成此文件并将其保存在内存中，当浏览器试图访问时，Webpack 会把内存中已修改后的 index.html 和 bundle.js 提供出来作为服务。
bundle.js 包含了应用程序运行所需的所有 JavaScript 代码，不仅包含 index.js、App.js 等的整个源代码，还包含了 React 库的整个源代码。这是一个巨大且混乱的文件。
那么项目里的其他文件呢？比如 index.css 和 logo.svg。
所有的东西都会被打包到 bundle.js 中，这就是 Webpack 做的，将应用程序中所有可以想到的“模块”都打包到 bundle.js 中，以实现 ES5 兼容的语法。并且，一个文件可以提高浏览器访问时的请求传输速度（每个文件在传输开始和结束都会增加开销），最大化性能。
