使用 React 加载 NPM 模块

2020-09-12 08:00:00 · 飞浪

介绍 NPM是nodepackagemanager的缩写，是一个包含各种已注册开源包的在线目录。使用NPM命令npminstall安装到应用程序中时，NPM模块会将各种功能作为第三方包使

介绍

NPM 是node package manager的缩写，是一个包含各种已注册开源包的在线目录。使用 NPM 命令npm install安装到应用程序中时，NPM 模块会将各种功能作为第三方包使用。

第三方 NPM 模块是特定功能或成熟库的逻辑单元，例如reactstrap、material-ui、redux-form等。在本指南中，您将学习如何使用 NPM 命令或 GitHub 源代码在应用中加载 NPM 模块。

使用 CLI 加载 NPM 模块

您可以使用 CLI 命令后跟模块名称轻松在您的应用中使用任何 NPM 模块。以下是用于安装 NPM 模块的语法。

      npm install <module_name>

尝试使用上述 CLI 命令安装任何模块。我们以安装reactstrap为例。

      npm install reactstrap

当你执行上述命令时，相关的模块文件夹将被添加到当前应用程序中的node_modules目录中，并且你将能够在应用程序的任何位置使用该模块的组件或功能。

安装的包是reactstrap，但你可能想知道如何在组件中使用它。按照下面方法导入模块。

      import React, { Component } from "react";
// Import the module
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";

class SimplePopover extends Component {
  render() {
    const { popoverOpen } = this.state;

    return (
      <div>
	    // Using the module's component
        <Popover
          placement="bottom"
          isOpen={popoverOpen}
          target="mypopover"
          toggle={this.togglePopover}
        >
          <PopoverHeader>This is popover title</PopoverHeader>
          <PopoverBody>
            This is simple popover content
          </PopoverBody>
        </Popover>
      </div>
    );
  }
}
export default SimplePopover;
    

您会注意到上面的代码中有一条语句从已安装的模块中导入组件。

      import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";
    

从模块导入所需组件后，您将能够将其使用到组件中。

使用 GitHub 存储库加载 NPM 模块

您可以使用 CLI 命令安装任何 NPM 模块来使用它，但是也可以通过提供 GitHub 存储库 URL 直接使用它，如下所示。

      npm install <git_repo_url>

除了 CLI 命令之外，还要添加要安装的模块所需的 GitHub 存储库 URL。

      npm install https://github.com/reactstrap/reactstrap.git

通过提供 GitHub URL 和安装命令，可以在目录node_modules中创建一个文件夹。并且包会在package.json中提及。

使用 package.json 文件加载 NPM 模块

文件package.json包含所有已安装依赖项的详细信息，例如模块和已安装的版本。不过，如果您想直接安装模块，可以通过输入两个参数来实现，如下所示。

      {
  "dependencies": {
    "package/module name": "version"
  }
}
    

指定要安装的模块及其所需的版本，这样一旦执行命令npm install，提到的包将与所有其他包一起安装。

因此，在这种情况下，npm install package_name不需要直接安装包。当您知道所有需要的包和版本时，这种方法非常方便。

结论

大多数基于 JavaScript 的库或框架都需要 NPM 包才能进行应用开发。因此，应使用本指南中介绍的方法之一安装这些包。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 React 加载 NPM 模块

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from "react"; // Import the module import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap"; class SimplePopover extends Component { render() { const { popoverOpen } = this.state; return ( <div> // Using the module's component <Popover placement="bottom" isOpen={popoverOpen} target="mypopover" toggle={this.togglePopover} > <PopoverHeader>This is popover title</PopoverHeader> <PopoverBody> This is simple popover content </PopoverBody> </Popover> </div> ); } } export default SimplePopover;