# Usage of npm

### Introduction

This sample shows how npm references third-party JS class libraries (mathjs and dayjs) and local libraries. The display effect is as follows:

![](./screenshots/en/index.png)

### Concepts

npm: a package manager that references third-party JS class libraries and local libraries.

##### Importing a Third-Party JS Class Library

1. Open the **Terminal** window and run the following command to go to the **entry** directory:

    cd entry

2. Run the following command to install a third-party library package. In this example, **dayjs** is being installed.

    npm install dayjs --save

3. Import the third-party library package in the corresponding .ets file.

    import dayjs from 'dayjs'

##### Creating a Local Library

1. Right-click the project name, choose **New > Module**, click **Ohos Library** on the **Choose Your Ability Template** page displayed, enter the module name, and click **Finish**.

2. In the new module directory, edit the **name** attribute in the **Package.json** file, for example, **name:@ohos/library**.

3. In the **entry** directory, add the new module as a dependency to the **dependencies** attribute in the **Package.json** file, for example, **"@ohos/library": "../library"**.

4. In the new **Module** directory, add the common components or interfaces to be exported to **Index.ets** file.

5. In the **entry** directory, import the common component or interface in the new module to be used, for example, **import {ThirdTitleBar} from '@ohos/library'**.

### Required Permissions

N/A

### Usage

1. The home page of the sample app shows the application of mathjs. After you touch **Click generate verification code**, a six-digit random verification code is generated in the lower part. If you touch the button again, a new verification code is displayed. You can touch **Back** to exit the app.

2. Touch **Next page**, and the application of dayjs is displayed. Enter the date to be calculated, enter either the number of days backwards or forwards, or both of them, and touch **Confirm**. The calculation result is displayed in the lower part. You can touch **Back** to return to the mathjs application page.

3. Touch **Next page**, and the application of the local library is displayed. Enter two strings as prompted and touch **Confirm**. The string after concatenation is displayed in the lower part. You can touch **Back** to return to the dayjs application page.

### Constraints

1. This sample can only be run on standard-system devices.

2. In this sample, only open-source pure logic third-party libraries can be imported. The **format** method in dayjs is not supported.

3. This sample is based on the stage model, which is supported from API version 9.

4. DevEco Studio 3.0 Beta4 (Build version: 3.0.0.992, built on July 14, 2022) must be used.

# npm的使用

### 简介

本示例展示了npm引用第三方js类库和本地库，主要展示了mathjs、dayjs和本地库应用。实现效果如下：

![](./screenshots/device/index.png)

### 相关概念

npm：npm引用第三方js类库和本地库。

##### 第三方js类库导入步骤

1.打开Terminal窗口，通过如下指令进入到entry目录。

    cd entry

2.以引入“dayjs”为例，执行以下指令进行安装。

    npm install dayjs --save

3.命令执行完成后在需要应用dayjs库的ets文件中引入该库。

    import dayjs from 'dayjs'

##### 本地库新建步骤

1.右键点击工程名，选择New，选择Module，选择Ohos library方式创建，修改Module的名称，点击finish。

2.在新建的Module目录下，编辑Package.json中的“name”属性，比如：“name”：“@ohos/library”。

3.在entry目录下，编辑Package.json中的“dependencies”属性，新增新建的Module作为依赖，比如："@ohos/library": "../library"。

4.在新建的Module目录下，编辑Index.ets，将需要export的公共组件或者接口添加进去。

5.在entry目录下，在需要用到新建Module里面公共组件或者接口时，import该组件进而应用，比如：import {ThirdTitleBar} from '@ohos/library'。

### 相关权限

不涉及。

### 使用说明

1.首页是对mathjs的应用，点击**点击生成验证码**，下方会生成六位随机验证码，点击一次，验证码会刷新一次，点击**返回**，退出该程序。

2.点击**下一页**按钮，页面跳转到第二页对dayjs的应用，按照提示条件必需输入要计算的日期，至少填写一个向前或者向后推多少天，点击**确认**按钮，下方会显示出计算的结果，点击**返回**按钮，返回到第一页对mathjs的应用。

3.点击**下一页**按钮，页面跳转到第三页对本地库的应用，按照提示必须输入两个字符串，点击**确定**，下方会显示两个字符串拼接后的字符串。点击**返回**按钮，返回第二页对dayjs的应用。

### 约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例仅支持已经开源纯逻辑第三方库的导入。

3.本示例为Stage模型，从API version 9开始支持。

4.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。