react

React系列文章链接：

react (Jun 17, 2019)

如何使用webpack和babel直接运行react项目

环境准备：确保你已经安装了 Node.js 和 npm
初始化项目

创建一个新的项目目录并初始化 package.json 文件:

1
2
3

mkdir my-react-app
cd my-react-app
npm init -y

安装依赖

安装 React 和 ReactDOM：

`1`	`npm install react@17.0.1 react-dom@17.0.1`

安装 Webpack 和 Webpack CLI 和相关插件：

1
2

npm install webpack webpack-cli --save-dev
npm install css-loader style-loader file-loader html-webpack-plugin html-loader --save-dev

安装 Babel 和相关插件：

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

@babel/core是babel的核心库，必须安装；@babel/preset-env用于把es6的语法编译成es5的语法；@babel/preset-react用于识别jsx语法；babel-loader用于把不同的文件转化为指定的格式输出。

安装TypeScript和相关插件，如果不安装，代码提示工具就会使用系统全局的，导致版本不对：

`1`	`npm install typescript @types/react@16.9.9 @types/react-dom@16.9.9 --save-dev`

安装 Webpack 开发服务器（可选，用于开发环境）：

`1`	`npm install webpack-dev-server --save-dev`

配置babel

在项目根目录下创建 .babelrc 文件，并添加以下内容：

1
2
3

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

配置 Webpack

在项目根目录下创建 webpack.config.js 文件，并添加以下内容：

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

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // 匹配 JavaScript 和 JSX 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader 处理
        },
      },
      {
        test: /\.css$/, // 匹配 CSS 文件
        use: ['style-loader', 'css-loader'], // 使用 style-loader 和 css-loader 处理
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader'
        }
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: 'react app',
      filename: 'index.html',
      template: './src/index.html'
    })
  ],
  devServer: {
    static: path.join(__dirname, 'dist'), // 开发服务器的静态文件目录
    compress: true, // 启用 gzip 压缩
    port: 3000, // 开发服务器端口
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 自动解析的文件扩展名
  },
};

my-react-app/
├── src/
│   ├── index.js       // 入口文件
│   ├── App.js         // React 组件
│   └── index.html     // HTML 模板
├── dist/              // Webpack 输出目录
├── .babelrc           // Babel 配置文件
├── webpack.config.js  // Webpack 配置文件
└── package.json       // npm 配置文件

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.js (react <=17)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

src/index.js (react >= 18)

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(<App />);

src/App.js

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

运行项目

开发环境:

`1`	`npx webpack serve --mode development`

打开浏览器访问 http://localhost:3000，即可看到 React 应用。

生产环境:

`1`	`npx webpack build --mode production`

编译后的文件会生成在 dist 目录中。

import为何有时必须使用{}

默认导出（Default Export）

一个模块只能有一个默认导出。
导入时不需要使用 {}，且可以自定义导入名称。

命名导出（Named Export）

一个模块可以有多个命名导出。
导入时必须使用 {}，并且名称必须与导出时的名称一致（或者使用 as 重命名）。

混合使用默认导出和命名导出

示例：混合导出

// utils.js
export const add = (a, b) => a + b; // 命名导出
const subtract = (a, b) => a - b;
export default subtract; // 默认导出

导入混合导出

1
2
3

import subtract, { add } from './utils'; // 默认导出不需要 {}，命名导出需要 {}
console.log(add(1, 2)); // 输出 3
console.log(subtract(5, 3)); // 输出 2

专题: react

本文发表于 2019-06-17，最后修改于 2019-06-17。

本站永久域名「 jiavvc.top 」，也可搜索「后浪笔记一零二四」找到我。

上一篇 « C程序设计语言-第1章导言下一篇 » yarn

react

如何使用webpack和babel直接运行react项目

import为何有时必须使用{}

推荐阅读