npm 包 @design-systems/cli-utils 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在 Web 开发中，设计语言和组件库有时候是团队或者企业内部需要协调一致的问题。@design-systems/cli-utils 提供了一些工具函数，可以快速实现一些类似按钮颜色、字体大小的样式变量管理。

安装

我们可以通过 npm 包管理工具来安装 @design-systems/cli-utils。在终端中输入以下命令：

npm install @design-systems/cli-utils

安装完成之后，我们可以通过 import 或 require 语句，在你的项目中使用这个库中提供的 API。

使用 @design-systems/cli-utils

变量管理

设计系统中，变量管理是十分重要的一环，CLi-utils 提供了一些便捷的 API 来帮助我们实现变量的管理。

安装依赖

首先，我们需要安装 sass 和 path 两个依赖，这两个依赖可以在 package.json 中配置。

"dependencies": {
  "sass": "^1.32.12",
  "path": "^0.12.7"
}

定义变量

我们可以在项目中创建一个 variables.scss 文件，定义颜色、字体、大小等业务需要的变量。

$primary-color: #1890ff;
$font-size-base: 14px;

我们还需要在 index.scss 文件中引入这个文件，并编写业务中需要用到的样式。

@import 'variables';

.button {
  background-color: $primary-color;
  font-size: $font-size-base;
}

生成变量

通过 CLi-utils 我们可以方便地自动生成 .json 格式的变量文件和 .scss 格式的变量文件。

我们可以在项目根目录下创建一个 cli.js 文件，并在其中引入 @design-systems/cli-utils 库。

const { generateSassVars } = require('@design-systems/cli-utils');
const path = require('path');

const inputPath = path.resolve(__dirname, './src/styles/variables.scss');
const outputPath = path.resolve(__dirname, './config/styles.json');

generateSassVars(inputPath, outputPath);

执行 node cli.js 命令后，就可以在 config 文件夹下看到自动生成的 styles.json 文件。

使用变量

现在我们已经生成了一个包含样式变量的 .json 文件，我们可以在编写业务代码的过程中引入这个文件，来使用这些变量。

import styles from '../config/styles.json';

const buttonStyle = {
  backgroundColor: styles['$primary-color'],
  fontSize: styles['$font-size-base'],
};

私有 npm 包管理工具 verdaccio

有的时候我们需要搭建一个内网的私有 npm 包管理工具，可以使用 verdaccio 和 npm 来搭建一个私有的 npm 包仓库。

安装 verdaccio

npm i -g verdaccio

启动 verdaccio

verdaccio

此时，默认在 4873 端口启动了一个 verdaccio 服务，现在我们可以添加用户并且登录。命令行中输入 http://localhost:4873/，可以看到当前仓库中已经有了一些默认的依赖包。

发布 npm 包

我们可以在项目根目录下使用 npm init --scope=example 命令来初始化一个项目，并发布到我们的私有 npm 仓库中。

npm publish --registry http://localhost:4873/

如果你想更新你发的包，需要在更新的时候要指定 --force 参数。

npm publish --registry http://localhost:4873/ --force

引用 npm 包

在需要使用该包的项目中，我们只需要在 package.json 文件中添加我们刚刚发布的包名，并且指定我们刚刚搭建的 npm 仓库地址。

{
  "name": "my-project",
  "dependencies": {
    "cli-utils": "example/cli-utils#1.0.0"
  },
  "registry":"http://localhost:4873/"
}

现在我们可以运行 npm install 来下载刚刚发布的包，使用 import 或者 require 语句来使用这个包中的函数了。

const { generateSassVars } = require('@example/cli-utils');

结束语

通过使用 @design-systems/cli-utils 包，我们可以快速实现一些变量的管理，并且可以方便地使用 verdaccio 搭建私有 npm 包管理仓库，我们在开发中可以更方便地通过 npm 安装和使用他人的相关工具和库，从而加速我们的开发流程。

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