npm 包 yoshi-common 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 npm 包已经成为了一项必备的技能，它可以方便我们管理项目中所需要的各类库和工具。而 yoshi-common 是一个优秀的 npm 包，提供了一系列的工具和方法，非常适合用于 React 项目。

本文将详细介绍 yoshi-common 的使用方法，并通过实际示例来指导读者使用该 npm 包。

yoshi-common 简介

yoshi-common 是一个基于 yoshi 的 npm 包，它提供了一系列的工具和方法来简化前端开发的流程。它的主要特点如下：

支持 React 项目：yoshi-common 可以非常方便地结合 React 项目使用，提供了一系列的 React 工具和组件。
优化开发体验：yoshi-common 提供了一些工具，例如 webpack 解析错误、eslint 编码规范检验等，都可以让开发者更加高效地进行开发。
灵活性强：yoshi-common 中的众多插件和配置文件都可以自由配置，根据项目需要进行选择和使用。

安装 yoshi-common

使用 yoshi-common 需要先在本地安装该 npm 包，可以使用以下命令进行安装：

npm i yoshi-common --save-dev

使用 yoshi-common

yoshi-common 中包含了众多工具和方法，下面将介绍其中几个常用的部分：

API 请求封装

在开发过程中，我们经常需要向后台发送请求获取数据，yoshi-common 提供了一系列的 API 封装方法，可以非常方便地进行请求，支持 Promise 和 async/await 等方式。下面是一个简单的使用例子：

import { api } from 'yoshi-common';

api
  .request('/example/api')
  .then(res => console.log(res))
  .catch(err => console.error(err));

React 组件库

yoshi-common 提供了一套完整的 React 组件库，包括但不限于 Modal、Select、Tabs 等等，可以极大地方便我们的开发。下面是一个简单的使用例子：

import { Modal } from 'yoshi-common';

<Modal title="这是标题">
  <p>这是正文</p>
</Modal>

UI 测试工具

yoshi-common 中的 UI 测试工具可以方便地进行 UI 测试，并生成报告，可以帮助我们更快速地进行 bug 修复和测试。下面是一个简单的使用例子：

import { testkit } from 'yoshi-common';

const widgetDriver = testkit.widget('Widget').beforeAndAfter();
await widgetDriver.clickButton();
widgetDriver.getButtonText(); // returns 'Clicked!'

配置文件

yoshi-common 中包含了多个配置文件，可以用于配置 webpack、eslint 等各个工具的不同参数，方便我们进行个性化开发。例如在 package.json 文件中添加以下参数即可使用 yoshi-common 提供的 lint 规则：

"prettier": {
  "eslintIntegration": true,
  "stylelintIntegration": true
},
"eslintConfig": {
  "extends": "yoshi-common/config/eslint"
},
"stylelint": "yoshi-common/config/stylelint"

结语

以上是 yoshi-common 的主要使用方法和特点，希望读者可以通过本文的介绍，能够更好的掌握该 npm 包的使用方法和技巧，从而更高效地进行前端开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f053a38403f2923b035be9d