在组件库工程中引入 PNPM：增强过滤能力、迈入 Gulp、整合代码规范

2024-01-08 18:35:00







## PNPM 过滤：掌控依赖关系

PNPM 过滤器是一种强大的工具，允许我们根据特定条件对依赖关系进行过滤。这对于管理大型组件库至关重要，因为我们可以只专注于特定包或一组包上的操作。

### 精准选择包

使用 `--filter` 标志，我们可以通过包名称准确选择包。例如，要仅更新 `@foo/bar` 包，我们可以运行：

pnpm update --filter @foo/bar


### 根据模式选择包

除了精确匹配，我们还可以使用模式来选择匹配的包。例如，以下命令将更新所有名称以 `@foo` 开头的包：

pnpm update --filter @foo*


### 嵌套过滤器

过滤器可以嵌套使用，以创建更复杂的选择标准。例如，以下命令将更新所有名称以 `@foo` 开头且版本号大于 `1.0.0` 的包：

pnpm update --filter @foo* --filter ">1.0.0"


## Gulp：自动化构建流程

Gulp 是一个流行的构建工具，可以简化组件库的构建和自动化任务。通过定义一系列任务，我们可以轻松执行重复性操作，例如编译、压缩和测试。

### 安装 Gulp

要安装 Gulp，请运行以下命令：

npm install gulp --save-dev


### 创建 Gulpfile.js

创建一个名为 `Gulpfile.js` 的文件，并添加以下代码：

```javascript
const gulp = require('gulp');

gulp.task('default', function() {
  // 在这里定义你的任务
});

定义任务

我们可以定义各种任务来自动化不同任务。例如，以下任务编译 Sass 文件：

gulp.task('compile-sass', function() {
  return gulp.src('./src/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/css'));
});

运行任务

要运行任务，请在终端中输入：

gulp <task_name>

整合代码规范

保持代码风格一致对于大型组件库至关重要。我们可以使用 ESLint 等代码规范工具来强制执行约定并提高代码质量。

安装 ESLint

要安装 ESLint，请运行以下命令：

npm install eslint --save-dev

创建 .eslintrc 文件

创建一个名为 .eslintrc 的文件，并添加以下配置：

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}