使用 npm 而非纱线创建反应应用程序 - Shell/Bash

当我们想要创建一个新的反应应用程序时，我们通常会使用纱线来初始化应用程序。但是，我们可以使用 npm 包管理器来完成这项工作。在本文中，我们将介绍如何使用 npm 而非纱线来创建反应应用程序。

安装 Node.js

在开始之前，我们需要在我们的机器上安装 Node.js。您可以从Node.js官方网站下载适合您操作系统的版本，并按照说明进行安装。

初始化 npm 项目

在创建反应应用程序之前，我们需要初始化 npm 项目。

npm init

您将被提示输入一些项目细节，例如项目名称、描述、作者和许可证。您可以单击“Enter”键跳过某些字段，或者键入适当的答案。这将创建一个名为“package.json”的文件，该文件包含有关 npm 项目的信息。

添加反应依赖

接下来，我们需要安装反应依赖。

npm install react react-dom --save

此命令将在“package.json”文件中添加要安装的模块，并在当前目录中创建一个名为“node_modules”的目录，其中包含反应包。

添加 babel 依赖

我们还需要使用 babel 编译器来编写我们的反应代码。因此，我们需要安装 babel 依赖。

npm install babel-core babel-loader babel-preset-react --save-dev

此命令将安装 babel 编译器及其必需的依赖项。“babel-core”是 babel 编译器的核心，“babel-loader”是将 babel 编译器与 webpack 打包器集成所必需的。在这里，“babel-preset-react”是 babel 的预设模块，用于编译 React 代码。

添加 Webpack 依赖

我们还将使用 webpack 打包器。因此，我们需要添加 webpack 依赖。

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

此命令将安装 webpack 和 webpack-dev-server。webpack-dev-server 非常有用，因为它在自动编译您的代码后在本地服务器上提供您的应用程序。

编写代码

现在，我们已准备好开始编写我们的反应代码。我们创建一个名为“App.js”的新文件，并编写以下代码。

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default App;

这个简单的组件将显示“Hello，World！”在网页上。

我们还需要创建一个用于呈现 App 组件的文件。我们使用一个名为“index.js”的文件。以下是“index.js”的代码。

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

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

这个文件将 App 组件呈现为 HTML 元素“root”。

添加 webpack 配置

我们需要添加一个 webpack 配置文件来告诉 webpack 如何编译我们的代码。以下是我们的 webpack 配置文件“webpack.config.js”。

var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }
    ]
  },
  devServer: {
    contentBase: './dist',
    port: 3000
  }
};

该配置文件告诉 webpack，我们的入口文件是“index.js”文件，并且 webpack 输出文件名为“bundle.js”。我们还告诉 webpack 编译所有以“.js”结尾的文件，并使用 babel-loader 编译React代码。

我们还可以使用“webpack -w”命令来监视代码更改，并自动重新编译并刷新浏览器。

运行应用程序

最后，我们需要运行应用程序并在浏览器中查看结果。首先，我们需要使用以下命令编译我们的代码。

webpack -p

此命令将使用我们的 webpack 配置文件编译我们的代码。现在我们可以使用以下命令在本地服务器上启动我们的应用程序。

webpack-dev-server

命令会自动启动本地服务器，访问 http://localhost:3000，我们将看到我们的反应应用程序正在运行，并且看到我们的应用程序输出了“Hello，World！”在网页上。

总之，我们现在已经成功地创建了一个反应应用程序，并使用 npm 包管理器与 webpack 打包器进行了集成。使用 npm 而非纱线的好处是，可以更好地管理反应项目的依赖关系，从而更轻松地处理版本控制。