ngx-sonner 项目教程

ngx-sonner 项目教程

ngx-sonner An opinionated toast component for Angular. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-sonner

1. 项目目录结构及介绍

ngx-sonner 是一个为 Angular 应用程序设计的 Toast 组件。项目目录结构如下：

ngx-sonner/
├── .github/                        # GitHub 工作流和模板文件
├── .vscode/                        # Visual Studio Code 配置文件
├── apps/                           # Angular 应用程序目录
├── docs/                           # 文档目录
├── libs/                           # NgxSonner 库目录
│   └── ngx-sonner/                 # NgxSonner 库具体实现
├── .editorconfig                    # 编辑器配置文件
├── .eslintignore                   # ESLint 忽略文件
├── .eslintrc.json                  # ESLint 配置文件
├── .gitignore                      # Git 忽略文件
├── .node-version                    # 指定项目 Node.js 版本
├── .prettierrc                     # Prettier 配置文件
├── CHANGELOG.md                    # 更改日志
├── LICENSE                         # 项目许可证
├── README.md                       # 项目说明文件
├── jest.config.ts                  # Jest 测试配置文件
├── jest.preset.js                  # Jest 预设配置文件
├── nx.json                         # Nx 工作空间配置文件
├── package-lock.json               # npm 锁定文件
├── package.json                    # npm 配置文件
├── release.config.js               # 发布配置文件
└── tsconfig.base.json              # TypeScript 基础配置文件

• .github/: 包含 GitHub 工作流和模板文件，例如 Pull Request 模板。
• .vscode/: 包含 Visual Studio Code 的配置文件，用于统一开发环境。
• apps/: 包含 Angular 应用的源代码，通常用于演示库的功能。
• docs/: 存放项目文档的目录。
• libs/: 包含 NgxSonner 库的源代码。
• .editorconfig: 用于定义代码风格配置，使其在不同编辑器中保持一致。
• .eslintignore 和 .eslintrc.json: ESLint 配置文件，用于代码质量检查。
• .gitignore: 定义 Git 忽略的文件和目录。
• .node-version: 指定项目使用的 Node.js 版本。
• .prettierrc: Prettier 配置文件，用于代码格式化。
• CHANGELOG.md: 记录项目版本更新和变更历史。
• LICENSE: 项目使用的许可证信息。
• README.md: 项目说明文件，介绍项目的功能和使用方法。
• jest.config.ts 和 jest.preset.js: Jest 测试框架的配置文件。
• nx.json: Nx 工作空间配置文件，Nx 是 Angular 的工具链。
• package-lock.json 和 package.json: npm 配置文件，包含项目依赖。
• release.config.js: 发布配置文件，用于自动化发布流程。
• tsconfig.base.json: TypeScript 基础配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 apps/ 目录下的 main.ts 文件。以下是 main.ts 文件的基本内容：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from '../environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

这个文件做了以下几件事情：

• 导入 Angular 的核心库函数 enableProdMode 和 platformBrowserDynamic。
• 导入 AppModule，这是 Angular 应用的根模块。
• 检查环境变量，如果是在生产环境，则启用生产模式。
• 使用 platformBrowserDynamic().bootstrapModule(AppModule) 来启动 AppModule。

3. 项目的配置文件介绍

项目的配置文件主要集中在 environments/ 目录下，包括 environment.ts 和 environment.prod.ts。

environment.ts 文件通常包含开发环境的配置：

export const environment = {
  production: false,
  // 其他配置项
};

environment.prod.ts 文件包含生产环境的配置：

export const environment = {
  production: true,
  // 其他配置项
};

这两个文件的主要区别是 production 属性的值，它决定了是否启用生产模式。此外，还可以在这两个文件中定义其他环境特定的配置项，如 API 地址等。

在 tsconfig.base.json 文件中，可以配置 TypeScript 编译器的各种选项，例如模块系统、严格模式、ES 版本等。

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    // 其他编译器选项
  },
  // 包含和排除文件
}

以上是 ngx-sonner 项目的基本介绍，包括目录结构、启动文件和配置文件的内容和作用。

ngx-sonner An opinionated toast component for Angular. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-sonner