不使用”create-react-app” ，创建React项目

1 年 ago
宇, 华
2 minutes

首先

这篇文章用于保存个人开发期间所获得的知识，以便随时查阅。由于可能存在言辞不准确和不恰当的地方，如果您发现了任何问题，请告知我，将不胜感激。

如果使用create-react-app来创建React应用程序，可以很方便地开始开发而不必担心详细的配置。然而，由于这些配置是隐藏的，我们也失去了理解其背后运行功能的机会。因此，我们将不使用create-react-app来构建React应用程序。

前提

假设已经安装了Node.js。

The content (of something)

请创建一个适当的目录，并在其中进行开发。你可以随意命名。然后，请移动到所创建的目录中。

创建一个Node项目

创建一个Node项目并生成package.json文件。请执行以下命令。

$ npm init -y

安装与Babel相关的软件

Babel是一种编译器，用于将后续创建的JavaScript代码转换为向后兼容的形式。例如，在支持ES5的浏览器上使用符合ES6标准的JavaScript时，Babel会将ES6 JavaScript转换为ES5 JavaScript。

React使用类似HTML的JSX语法来构建应用程序。Babel也用于转换这些语法。

执行以下命令，安装Babel及其相关软件包。

npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react

这是已安装软件包的详细信息。

@babel/core: Babelのメインパッケージ

babel-loader: Webpackとの橋渡し？

@babel/cli: Babelをコマンドラインから使用可能にする。

@babel/preset-env: ES6に準拠したJavaScriptを古いバージョンのJavaScriptに変換するパッケージのまとまり。

@babel/preset-react: React JSXシンタックを異なるバージョンのJavaScriptに変換するパッケージ。

Webpack相关安装。

Webpack是一个将分散的文件捆绑在一起并生成一个JavaScript文件的软件包。它可以捆绑不仅仅是JavaScript文件，还包括CSS、JSON等多种文件类型。

运行以下命令，安装Webpack及相关的包。

npm install --save-dev webpack webpack-cli webpack-dev-server

以下是已安装软件包的详细信息。

webpack: Webpackのメインパッケージ

webpack-cli: Webpackをコマンドラインから使用可能にする。

webpack-dev-server: 開発環境にて簡易的にサーバーとして機能する。

安装 HtmlWebpackPlugin

HtmlWebpackPlugin是一个帮助创建主HTML文件的包。Webpack可以将多个文件转换为单个JavaScript文件，但是如果每次执行时使用不同的文件名，则主HTML无法识别哪个是捆绑的JavaScript。这时就可以使用HtmlWebpackPlugin。当Webpack捆绑所有文件时，将主HTML的源文件传递给HtmlWebpackPlugin，它会自动生成新的HTML。

执行以下命令，安装HtmlWebpackPlugin。

npm install --save-dev html-webpack-plugin

安装与React相关的依赖

请安装React和ReactDOM。请执行以下命令。

npm install react react-dom

编写HTML和JavaScript。

我将创建一个主要的HTML文件和使用React编写的JavaScript文件。首先，创建一个名为public的文件夹，在其中添加index.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reactアプリケーション</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

接下来，创建src目录，并在其中添加App.js文件。

import React from "react";

export default function App() {
    return (
        <h1>
            Hello world!
            React without create-react-app.
        </h1>
    )
}

返回根目录并创建一个名为index.js的文件，作为应用程序的入口点。

import React from "react"
import ReactDOM from "react-dom"
import App from './src/App.js'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

我在public/index.html文件中的

标签中插入了由App.js中定义的应用程序。

巴别塔的设置

在根目录下创建一个名为.babelrc的文件，并添加以下内容。

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

这里告诉我们要使用之前安装的@babel/preset-env和@babel/preset-react在Babel中。

Webpack配置

在根目录下创建webpack.config.js文件。由于内容可能会变得复杂，因此列举出首先需要设置的项目。

entry: どのファイルを起点にバンドルを開始するか。今回の場合はindex.js

mode: バンドルするファイルに影響するプロパティ？

output: Webpackがバンドルしたファイルをどこにどんな名前で吐き出すかを指定。

target: サーバー側とブラウザ側どちらにコンパイルさせるかの設定。

devServer: 開発サーバー(webpack-dev-server)の設定。

port: 使用するポート番号を指定する
static: 静的ファイル関連

resolve: インポートする際に指定した拡張子を削除できる。

module: 異なる種類のファイルをバンドルする際に、それぞれどのように操作するかを指定する。

plugins: Webpack内で使用するプラグインを指定する。今回はHTMLWebpackPluginを利用。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  target: 'web',
  devServer: {
    port: '3000',
    static: {
      directory: path.join(__dirname, 'public')
    },
    open: true,
    hot: true,
    liveReload: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        use: 'babel-loader', 
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html')
    })
  ]
};

在package.json中定义新命令

在根目录下，将以下内容添加到最开始生成的package.json文件中。

"scripts": {
    "start": "webpack-dev-server .",
    "build": "webpack ."
  }

以npm run start命令来执行

スクリーンショット 2023-11-26 3.53.46.png

可能会遇到以下错误情况，取决于指定的端口号。

Sanma 0:00:00 ~/Desktop/hoge $ npm run start

> dev@1.0.0 start
> webpacl-dev-server .

/Users/Sanma/Desktop/hoge/node_modules/webpack-dev-server/lib/Server.js:2557
    throw error;

Error: listen EADDRINUSE: address already in use :::5000

在那种情况下，请更改使用的端口号。

结束了

我能够创建React应用程序而无需使用create-react-app。我被一个命令执行的复杂程度所惊讶，也被隐藏的功能数量所压倒。然而，我对应用程序开发的框架有了更深入的理解，因此可以说我的理解有了很大的进步。

谢谢您的阅读。

✖
广告
将在 10 秒后关闭
bannerAds