上一篇介绍完 HMR 热更新之后，接着我们会讲解 React 项目搭建。
题外话
首先官方提供了一个 create-react-app 脚手架工具来创建 React 项目。
*本项目不采用该脚手架进行搭建。
*下面使用 npm 举例，与 yarn 大同小异。
*仅简述，不感兴趣可跳过该内容。
# 安装 create-react-app
$ npm install -g create-react-app
# 创建项目
$ create-react-app your_project
# 打开项目
$ cd your_project
# 运行项目
$ npm run start
# 项目打包
$ npm run build
# 自定义配置，注意执行这个命令是不可逆的
$ npm run eject
我们通过
create-react-app创建的项目，可以看到它只有react、react-dom、react-scripts等少数依赖。其实，它将webpack、Babel、ESLint等依赖包通过creat-react-app封装到了react-scripts当中，包括基本启动命令都是通过调用react-scripts这个依赖下面的命令来完成的。除了
start、build、test命令。它还有一个"eject": "react-scripts eject"命令。它的作用是什么呢？它会将原本
creat-react-app对webpack、Babel、ESLint等相关配置的封装“弹出”。假如我们要将creat-react-app配置文件进行修改，现有目录下是没有地方修改的。此时，我们就可以通过npm run eject命令将原本被封装到脚手架当中的命令弹射出来，然后在项目目录下看到很多配置文件。注意，该命令是单向操作，不可逆。（在README.md中对此命令有简述。）
使用 Babel
Babel 是什么？
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块，babel 7.4 开始废弃
@babel/polyfill)- 源码转换 (codemods)
- 更多！ (查看这些 视频 获得启发)
babel 配置
- 安装依赖
$ yarn add --dev babel-loader@8.0.6 @babel-core/core@7.7.4
- 添加
module.rules配置
// webpack.config.js
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
- 创建
.babelrc配置文件
我们已经配置了 Babel，但实际上并未做任何事情。在项目根目录中创建一个.babelrc配置文件（JSON），并启用一些预设和插件。
-
@babel/preset-env：解析 ES6 语法，它只做语法转换，如
const、let。它并不处理includes、Promise等 api。 - @babel/preset-react：解析 JSX 语法。
- @babel/plugin-transform-runtime：解决全局变量污染，以及重复声明 helper 函数的问题。
$ yarn add --dev @babel/preset-env@7.7.4
$ yarn add --dev @babel/preset-react@7.7.4
$ yarn add --dev @babel/plugin-transform-runtime@7.7.4
$ yarn add --dev core-js@3.6.0
// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false, // 将 ESM 转化为其他模块规范，默认值 false。
"useBuiltIns": "usage", // 按需加载
"corejs": 3, // Babel 建议使用 useBuiltIns 选项时显式设置 core-js 版本
"debug": false // 打印插件使用情况
}
],
"@babel/preset-react" // 解析 JSX 语法
],
"plugins": ["@babel/plugin-transform-runtime"]
}
*关于 .babelrc 相关预设与插件详解，在后续会专门出一篇文章整理介绍；
*顺序问题：1 Plugins 在 Presets 前运行；2 Plugins 按照声明次序顺序执行；3 Presets 按照声明次序逆序执行。
React
- 首先安装
react、react-dom依赖包。
$ yarn add react@16.12.0 react-dom@16.12.0
插个话题：为什么 react 和 react-dom 要分成两个包？
对于具有跨平台能力的 React 体系来说，分包可以将抽象逻辑与平台实现分开。
- react 包即是抽象逻辑，它包含了 React 的主干逻辑。例如组件实现、更新调度等。
- react-dom 顾名思义就是一种针对 dom 的平台实现，主要用于在 web 端进行渲染。而声名在外的 React Native 则是原生应用实现，可以通过 React Native 内部的相应机制与操作系统进行通信来调用原生控件进行渲染。
*以上简述来自知乎 Shockw4ver 回答。
- 引入 react
// index.js
import React from 'react'
import { render } from 'react-dom'
import './main.js'
import './style.css'
// 最简单的 React 示例
const rootElem = document.getElementById('app')
render(<div>Hello React!</div>, rootElem)
if(module.hot) {
module.hot.accept('./main.js', () => {
console.log('Accept update！')
})
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
至此，最简单的 React 示例已经成功了。
接下来，我们将会先介绍接入 react-hot-loader 实现 react 的局部刷新问题。
最后附上
// package.json
{
"name": "webpack4_demo",
"version": "1.0.0",
"description": "从零到一搭建 react 项目",
"main": "src/index.js",
"repository": "git@github.com:toFrankie/webpack4_demo.git",
"author": "Frankie <1426203851@qq.com>",
"license": "MIT",
"private": true,
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --colors",
"build": "webpack --config webpack.config.js --progress --colors --mode=production"
},
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.10"
},
"devDependencies": {
"@babel/core": "7.7.4",
"@babel/plugin-transform-runtime": "7.7.4",
"@babel/preset-env": "7.7.4",
"@babel/preset-react": "7.7.4",
"babel-loader": "8.0.6",
"clean-webpack-plugin": "3.0.0",
"core-js": "3.6.0",
"css-loader": "3.2.0",
"html-webpack-plugin": "3.2.0",
"style-loader": "1.0.0",
"webpack-dev-server": "3.9.0"
}
}
网友评论