如何在不使用 create-react-app 的情况下从头开始搭建 React.js 应用？
原文发布于此处
在使用了近两年的Ember.js之后，我尝试了React.js。和所有开发者一样，我开始上网搜索如何使用React.js创建我的 Hello World 应用。
最初，我发现了create-react-app ，它对于快速创建React.js应用非常有用。我非常喜欢create-react-app，因为它包含了我们在 JS 框架中通常需要的所有配置，从开发服务器到测试环境，应有尽有。
使用一段时间后，我感觉它缺乏自定义功能。create -react-app底层使用Webpack构建应用程序。Webpack 是一个广泛使用的 JavaScript 打包工具，拥有庞大的生态系统，支持大量的插件。但是create-react-app不允许我们探索这些插件。
因此，我得出结论，我需要放弃使用create-react-app ，才能充分利用webpack和React.js的强大功能。于是，我开始编写自己的 webpack 配置，以释放 webpack 的全部潜能。
在这里，我将介绍我是如何使用 webpack 构建我的 React 应用程序的，希望能帮助像我一样的开发者。
先决条件
- 您的计算机上必须已安装Node.js。希望你们都熟悉yarn。另外，yarn是全局安装的。
- 创建一个空项目并创建一个package.json文件。
安装
安装以下软件包。
设置 React.js
yarn add react and react-dom
react - React.js 库。react
-dom - 此包作为 React 的 DOM 和服务器渲染器的入口点。
配置 webpack
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin
webpack - Webpack 是一个模块打包工具。webpack
-cli - webpack 的命令行界面。webpack
-dev-server - 提供实时重载功能的开发服务器。html
-webpack-plugin - HtmlWebpackPlugin 简化了用于提供 webpack 打包文件的 HTML 文件的创建。
设置 Babel
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader
@babel /core - 主要用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。
@babel /preset-env - @babel /preset-env 允许您使用最新的 JavaScript 版本。
@babel /preset-react - 此软件包包含一组用于支持 React.js 特定功能的插件。babel
-loader - 此软件包允许使用 Babel 和 webpack 转译 JavaScript 文件。
配置
我们已经安装了使用webpack创建React.js应用所需的所有软件包。接下来，我们需要一个index.html模板，用于插入 React 构建的 DOM 元素。请在src/文件夹下创建一个 HTML 文件。
src/index.html
<html>
<head>
<title>Setup React Application From Scratch</title>
</head>
<body>
<!-- We will insert the dom here -->
<div id="react-app">
</div>
</body>
</html>
此外，我们需要一个创建 React 应用的起点。创建一个名为 src/ 的文件夹，并以此作为 js 文件索引。
src/index.js
import React from 'react';
import { render } from 'react-dom';
const rootElement = document.getElementById('react-app');
render(<div> Hello World! </div>, rootElement);
配置 webpack 以服务于线上开发服务器
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/index'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: ['babel-loader']
}]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 9000
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html" //source html
})
]
};
巴别塔配置
.babelrc
{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
}
我们已经到达终点线了。等等！还有一件事要做。将webpack脚本添加到package.json文件中。
package.json
{
"name": "react-setup-from-scratch",
"scripts": {
"serve": "webpack-dev-server --mode development",
"build": "webpack --mode production",
}
}
好了！是时候开始了。让我们启动开发服务器。
yarn serve
好了！完成了。让我们看看输出结果。
完整的代码可以在这里找到。
我希望这篇文章对初学者有所帮助❤️。
文章来源：https://dev.to/theenadayalan/how-to-set-up-react-js-from-scratch-without-using-create-react-app-37mk