npm 包 yoshi-angular-dependencies 使用教程

如果你是一个前端开发者，并且你的项目是基于 Angular 进行开发，那么你可能会遇到各种依赖问题。yoshi-angular-dependencies 这个 npm 包的诞生，就是为了解决这个问题。它可以帮助你自动处理 Angular 项目的依赖问题，极大地提高开发效率。

安装和配置

首先，在你的项目根目录下执行以下命令安装 yoshi-angular-dependencies：

npm install yoshi-angular-dependencies --save-dev

安装完成后，你需要在你的 package.json 文件中添加以下配置：

-- -------------------- ---- -------
--------------------------- -
    -------- -------------
    ---------- -
        ---------------
        -----------------------
        ---------------
        --------------
        ------------------
        ----------------------
    -
-

files 配置表示需要处理的文件，上面的配置表示处理项目下 src 目录下所有文件。

exclude 配置表示需要排除的文件，这些文件不需要处理。

接着，你需要在 scripts 中添加以下命令：

"scripts": {
    "preinstall": "npx yoshi-angular-dependencies"
}

这个命令会在你安装项目依赖时自动执行，将会自动解决项目的依赖问题。

使用示例

举个例子，当你在你的项目中使用 @angular/common 包时，你可以这样进行引入：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
@NgModule({
    imports: [CommonModule],
    ...
})
export class AppModule { }

然而，这个包的路径可能会不同，如果你在不同的文件夹中引入，你可能会写成这样：

import { NgModule } from '@angular/core';
import { CommonModule } from '../../../node_modules/@angular/common';
...
@NgModule({
    imports: [CommonModule],
    ...
})
export class AppModule { }

如果你使用 yoshi-angular-dependencies，你就不需要关心包的路径问题，只需要直接引入：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
@NgModule({
    imports: [CommonModule],
    ...
})
export class AppModule { }

yoshi-angular-dependencies 会自动处理包的路径问题，确保你的代码始终可以正常运行。

结束语

yoshi-angular-dependencies 是一个非常实用的 npm 包，可以帮助你自动处理 Angular 项目的依赖问题。在日常开发中，使用这个包可以省去很多不必要的麻烦，极大地提高开发效率。建议你在你的 Angular 项目中使用这个包，并将其纳入你的日常工作流中。

示例代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
@NgModule({
    imports: [CommonModule],
    ...
})
export class AppModule { }

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