记录一些学到的东西,由于是学到什么就记什么,所以可能会有些杂,不要介意不要介意。

# SkyWalking—— 服务器访问情况运维

SkyWalking 是一个开源的分布式追踪、性能监控和服务治理平台,主要用于监控和管理微服务、云原生应用和容器化应用。它的核心功能包括:

  1. 分布式追踪:SkyWalking 可以收集、分析和展示应用程序的分布式调用链路,帮助开发者和运维人员了解各个服务之间的调用关系和性能指标。

  2. 性能监控:它能够监控应用程序的性能,包括请求的延迟、吞吐量、错误率等,帮助识别和解决性能瓶颈和故障。

  3. 服务治理:通过提供服务的健康状况和性能数据,SkyWalking 可以帮助实现服务的自动化治理和优化。

SkyWalking 的架构包括探针(Agent)、收集器(Collector)和可视化界面(UI)三个主要部分:

  • 探针(Agent):部署在应用程序中,负责收集应用程序的运行数据和分布式追踪信息。
  • 收集器(Collector):用于接收、存储和处理探针发送的数据,并将处理后的数据提供给可视化界面。
  • 可视化界面(UI):提供数据的展示和查询功能,用户可以通过图表和仪表盘查看应用程序的性能和追踪数据。

SkyWalking 支持多种语言的应用程序,包括 Java、.NET Core、Node.js、Python 等,能够适应多种技术栈的微服务架构。其开源代码托管在 Apache 基金会下,具有良好的社区支持和文档资源。

# Kibana—— 统一日志系统接入

Kibana 是一个开源的数据可视化和探索工具,主要用于展示和分析存储在 Elasticsearch 中的数据。它是 Elastic Stack(以前称为 ELK Stack)的一部分,通常与 Elasticsearch 和 Logstash 一起使用。Elastic Stack 是一个用于日志和事件数据的收集、存储、搜索和分析的解决方案。以下是 Kibana 的主要功能:

  1. 数据可视化:Kibana 提供各种图表和仪表盘,包括柱状图、折线图、饼图、热力图等,用户可以根据存储在 Elasticsearch 中的数据创建自定义的可视化视图。

  2. 仪表盘:用户可以创建和共享仪表盘,综合展示多种数据可视化,帮助团队监控系统性能、业务指标和其他关键数据。

  3. 搜索和分析:Kibana 提供强大的搜索功能,允许用户使用 Elasticsearch 的查询语言(Query DSL)来搜索和过滤数据,并进行深入的分析。

  4. 日志管理:与 Logstash 或 Beats 结合使用,Kibana 可以用来收集、处理和分析日志数据,帮助发现和解决问题。

  5. 警报和报告:Kibana 可以设置告警,当数据达到某些条件时触发告警,并生成定期报告。

  6. 机器学习:Kibana 还支持 Elastic Stack 的机器学习功能,帮助自动检测异常和预测趋势。

Kibana 的主要组件包括:

  • Discover:用于数据探索和搜索,可以查看和过滤存储在 Elasticsearch 中的原始数据。
  • Visualize:用于创建各种类型的数据可视化。
  • Dashboard:用于组合和展示多个可视化视图,创建综合仪表盘。
  • Canvas:提供更自由的设计空间,可以创建高度自定义的图形化报告和展示。
  • Machine Learning:用于设置和管理机器学习任务。
  • Dev Tools:提供一个控制台,可以直接与 Elasticsearch 进行交互和查询。

Kibana 通常用于日志分析、系统监控和业务数据的可视化,为运维团队、开发人员和业务分析师提供强大的工具来分析和展示数据。

# Elasticsearch

Elasticsearch 是一个开源的分布式搜索和分析引擎,基于 Apache Lucene 构建。它是 Elastic Stack 的核心组件,用于高效地存储、搜索和分析大量的数据。以下是 Elasticsearch 的主要功能和特点:

# 主要功能:

  1. 全文搜索

    • Elasticsearch 提供强大的全文搜索功能,可以快速搜索和分析大量文本数据,支持复杂的查询和过滤条件。
  2. 分布式架构

    • Elasticsearch 设计为分布式系统,可以轻松扩展,支持水平扩展和高可用性,能够处理海量数据和高并发请求。
  3. 实时数据处理

    • Elasticsearch 支持实时数据索引和搜索,数据在插入后几乎可以立即被搜索和分析。
  4. 多租户

    • 支持多索引和多类型的数据存储,可以在一个集群中管理多个独立的索引,适合多租户应用场景。
  5. 聚合分析

    • 提供强大的聚合功能,可以对数据进行统计、分组、计算等多种分析操作,支持复杂的数据分析需求。
  6. RESTful API

    • 通过 RESTful API 提供访问接口,支持各种编程语言的客户端,易于集成到各种应用中。

# 核心概念:

  1. 索引(Index)

    • 索引是 Elasticsearch 中数据的基本存储单元,可以理解为关系数据库中的表(table)。
  2. 文档(Document)

    • 文档是存储在索引中的基本数据单元,可以理解为关系数据库中的行(row),每个文档是一个 JSON 格式的数据。
  3. 分片(Shard)

    • 索引可以分成多个分片,每个分片是一个独立的 Lucene 实例,分布在集群中的不同节点上,实现数据的分布式存储和处理。
  4. 副本(Replica)

    • 为了提高数据的高可用性和查询性能,每个分片可以有一个或多个副本,副本是分片的完整复制。

# 典型使用场景:

  1. 日志和事件数据分析

    • 与 Logstash 和 Kibana 结合使用,可以用于日志和事件数据的收集、存储、搜索和分析,常用于运维监控和安全分析。
  2. 全文搜索应用

    • 适用于需要高效搜索和检索大量文本数据的应用,如网站搜索、文档管理系统等。
  3. 实时数据分析

    • 适用于需要实时数据处理和分析的场景,如实时业务数据监控、市场分析等。
  4. 推荐系统

    • 可以基于用户行为数据进行分析和推荐,适用于电商、内容推荐等应用。

# 和 Algolia 的区别

Algolia 和 Elasticsearch 确实有一些相似之处,因为它们都是搜索和分析引擎,但它们在设计目标、使用场景和功能上有一些关键区别。

Algolia

  1. 托管服务:Algolia 是一个全托管的搜索服务,用户不需要管理基础设施,Algolia 提供了一个即用即付的搜索平台。
  2. 快速的搜索体验:Algolia 专注于提供极低延迟的搜索体验,特别适用于电子商务、内容管理系统和实时搜索应用。
  3. 简单的 API:提供简单易用的 API,快速上手,适合需要快速实现搜索功能的项目。
  4. 自定义排名和排序:提供灵活的排名和排序规则配置,满足不同应用场景的需求。

Elasticsearch

  1. 自托管:Elasticsearch 需要用户自己管理和维护基础设施,适合有运维能力的团队。
  2. 强大的分析能力:除了搜索,Elasticsearch 还提供强大的分析功能,适用于日志管理、监控、BI 等复杂的分析场景。
  3. 扩展性:能够水平扩展,处理大规模数据量和高并发请求。
  4. 灵活的数据建模:支持复杂的数据结构和多样的数据类型,适用于多种应用场景。

# 总结:

  • Algolia 更适合需要快速实现搜索功能的场景,特别是实时搜索和低延迟需求高的应用。
  • Elasticsearch 更适合需要复杂搜索和分析功能的场景,特别是有能力管理和维护分布式系统的团队。

# SkyWalking 和 Kibana 两者的区别

SkyWalking 和 Kibana 是两个不同的工具,它们的用途和功能各有侧重。

# 1. 功能和用途

SkyWalking

  • 分布式追踪:SkyWalking 主要用于分布式追踪和性能监控,帮助开发者和运维人员了解各个微服务之间的调用关系和性能指标。
  • 性能监控:SkyWalking 提供对请求延迟、吞吐量、错误率等性能指标的监控。
  • 服务治理:通过提供服务的健康状况和性能数据,帮助实现服务的自动化治理和优化。
  • 探针(Agent):SkyWalking 通过在应用程序中部署探针来收集运行数据和追踪信息。
  • 可视化界面:SkyWalking 提供了一个可视化界面,用于展示分布式追踪数据和性能指标。

Kibana

  • 数据可视化:Kibana 是一个数据可视化和探索工具,主要用于展示和分析存储在 Elasticsearch 中的数据。
  • 日志分析:与 Elasticsearch 和 Logstash 结合使用,Kibana 可以用于收集、处理和分析日志数据。
  • 仪表盘:用户可以创建和共享自定义仪表盘,综合展示多种数据可视化。
  • 搜索和分析:Kibana 提供强大的搜索功能,允许用户使用 Elasticsearch 的查询语言来搜索和过滤数据。
  • 机器学习:Kibana 支持 Elastic Stack 的机器学习功能,用于自动检测异常和预测趋势。

# 2. 数据源和集成

SkyWalking

  • 专用数据源:SkyWalking 主要收集和分析分布式系统的性能数据和追踪数据。它的探针部署在应用程序中,直接从运行时环境中收集数据。
  • 服务治理集成:SkyWalking 提供与服务治理相关的功能和数据集成,如服务健康监控和自动化治理。

Kibana

  • 通用数据源:Kibana 依赖于 Elasticsearch 作为数据存储,可以与各种类型的数据集成,包括日志、指标、APM(应用性能监控)数据等。
  • 日志和事件分析:Kibana 通过 Elasticsearch 和 Logstash 或 Beats 进行日志和事件数据的收集和处理,提供强大的日志分析能力。

# 3. 架构和部署

SkyWalking

  • 分布式架构:SkyWalking 由探针、收集器和可视化界面组成,通常需要部署和维护这些组件。
  • 数据存储:SkyWalking 可以使用多种后端存储(如 Elasticsearch、H2、MySQL)来存储收集到的数据。

Kibana

  • 单一工具:Kibana 是 Elastic Stack 的一部分,主要用于展示和分析 Elasticsearch 中的数据。它本身不收集数据,而是依赖 Elasticsearch 作为数据存储。
  • 易于部署:Kibana 是一个独立的工具,可以轻松与 Elasticsearch 集成,只需要配置连接到 Elasticsearch 集群。

# 总结

  • SkyWalking:主要用于分布式系统的性能监控和分布式追踪,适用于需要深入了解微服务调用关系和性能指标的场景。
  • Kibana:主要用于数据可视化和日志分析,适用于需要展示和分析大规模日志和事件数据的场景。

这两者可以在某些场景中互补使用,例如,SkyWalking 可以用于收集和分析分布式追踪数据,而这些数据可以存储在 Elasticsearch 中,然后通过 Kibana 进行可视化展示。

# JenKins——CI/CD

Jenkins 是一个开源的自动化服务器,广泛用于持续集成(CI)和持续交付(CD)流程。它通过自动化构建、测试和部署过程,帮助开发团队更快速、高效地交付软件。Jenkins 支持插件扩展,能够集成各种开发、测试和部署工具,适应多种开发环境和需求。

# Jenkins 的主要功能:

  1. 持续集成:Jenkins 可以自动化地从版本控制系统(如 Git)中获取代码变更,执行构建和测试,确保代码在合并前始终保持高质量。
  2. 持续交付和部署:Jenkins 可以自动化地将经过测试的代码部署到各种环境(如开发、测试、生产环境),确保代码变更能够快速、安全地上线。
  3. 插件支持:Jenkins 拥有大量插件,可以集成各种工具和服务,如构建工具(Maven、Gradle)、测试框架(JUnit、Selenium)、部署工具(Docker、Kubernetes)等。
  4. 多平台支持:Jenkins 支持多种操作系统和平台,能够在各种环境中运行。

# 在前端工程化中的角色:

在前端开发中,Jenkins 扮演了以下重要角色:

  1. 自动化构建

    • 代码检查:通过集成代码静态分析工具(如 ESLint),在每次代码提交时自动检查代码规范和质量。
    • 构建过程:自动化执行前端项目的构建过程(如使用 Webpack、Rollup 等打包工具),生成生产环境的代码。
  2. 自动化测试

    • 单元测试:运行单元测试框架(如 Jest、Mocha)以确保代码的功能正确。
    • 端到端测试:执行端到端测试(如使用 Cypress、Selenium)以验证应用的整体功能和用户交互。
  3. 自动化部署

    • 开发环境部署:在每次代码提交后,将构建好的前端代码自动部署到开发环境,供开发人员和测试人员验证。
    • 生产环境部署:在通过所有测试后,自动将前端代码部署到生产环境,确保快速、安全地上线。
  4. 持续监控和反馈

    • 构建状态监控:Jenkins 提供详细的构建日志和状态报告,帮助开发团队及时发现和解决构建和测试中的问题。
    • 通知和报告:通过集成通知插件(如 Slack、邮件),在构建失败或成功时及时通知相关人员。

# 示例:前端项目的 Jenkins 配置

以下是一个简单的 Jenkinsfile 示例,用于配置前端项目的持续集成和持续部署流程:

pipeline {
    agent any
    stages {
        stage('Checkout') {
            steps {
                // 从版本控制系统中拉取代码
                git 'https://github.com/your-repo/your-frontend-project.git'
            }
        }
        stage('Install Dependencies') {
            steps {
                // 安装项目依赖
                sh 'npm install'
            }
        }
        stage('Lint') {
            steps {
                // 代码静态检查
                sh 'npm run lint'
            }
        }
        stage('Build') {
            steps {
                // 构建项目
                sh 'npm run build'
            }
        }
        stage('Test') {
            steps {
                // 运行单元测试
                sh 'npm test'
            }
        }
        stage('Deploy') {
            when {
                branch 'main'
            }
            steps {
                // 部署到生产环境
                sh 'npm run deploy'
            }
        }
    }
    post {
        always {
            // 清理工作空间
            cleanWs()
        }
    }
}

在这个示例中,Jenkinsfile 定义了一个流水线,包含从代码拉取、依赖安装、代码检查、构建、测试到部署的各个阶段,实现了前端项目的自动化构建和部署。

# Nexus—— 包管理器私服的建立

# Nexus 是什么?

Nexus 是一个由 Sonatype 公司开发的软件仓库管理工具。它主要用于管理和存储各种软件构件(如库、插件、依赖项等),并提供方便的检索和发布功能。Nexus 支持多种构件库格式,例如 Maven、npm、NuGet、Docker 等,广泛应用于软件开发过程中依赖管理和构建过程的优化。

# Nexus 的主要功能

  1. 存储和管理构件:Nexus 可以作为中央存储库来存储项目所依赖的所有构件。这些构件可以包括内部开发的库、第三方库以及开源项目的依赖项。

  2. 构件检索:Nexus 提供强大的搜索功能,使开发人员能够快速找到所需的构件。此外,Nexus 还支持多种搜索条件,例如构件名称、版本、元数据等。

  3. 安全和权限管理:Nexus 支持细粒度的权限管理,可以控制哪些用户或团队可以访问、上传或下载特定的构件。这有助于确保企业内部构件的安全性和合规性。

  4. 集成构建工具:Nexus 可以与多种构建工具(如 Maven、Gradle、Ant 等)无缝集成,自动化管理构建过程中所需的依赖项。这减少了手动管理依赖的工作量,提高了构建过程的效率和可靠性。

  5. 高可用性和扩展性:Nexus 支持多节点集群部署,能够满足大型企业的高可用性需求。同时,Nexus 还提供丰富的插件体系,可以根据具体需求进行功能扩展。

  6. Docker 镜像库:Nexus 还可以作为 Docker 镜像库来使用,帮助企业管理 Docker 镜像的版本、分发和访问控制。

# Nexus 的使用场景

  1. 依赖管理:通过 Nexus 管理项目的所有依赖项,确保开发、测试和生产环境的一致性。
  2. 构件发布:开发团队可以将内部开发的库和构件发布到 Nexus,其他团队可以方便地获取和使用这些构件。
  3. 私有 Docker 镜像库:企业可以使用 Nexus 管理和分发私有的 Docker 镜像,确保镜像的安全性和可控性。
  4. 开源项目托管:一些开源项目也会使用 Nexus 作为其构件库,方便用户下载和使用。

# Nexus 的优势

  1. 集中化管理:所有构件和依赖项都可以集中存储和管理,减少了重复工作和资源浪费。
  2. 提高构建效率:自动化依赖管理和构件发布,提高了构建过程的效率和可靠性。
  3. 安全性:通过权限控制和访问日志,确保了构件的安全性和可追溯性。
  4. 灵活性和扩展性:丰富的插件体系和 API,满足各种定制化需求。

# Nexus 的版本

Nexus 主要有两个版本:

  1. Nexus Repository OSS:开源版本,免费提供基本的构件库管理功能。
  2. Nexus Repository Pro:专业版本,包含更多高级功能和企业支持服务。

# 如何安装和配置 Nexus

安装 Nexus 非常简单,只需要下载对应版本的安装包,然后按照官方文档进行配置即可。Nexus 支持多种操作系统,包括 Windows、Linux 和 macOS。配置完成后,可以通过 Web 界面进行管理和使用。

# 在前端开发方面扮演的角色

# 1. 依赖管理

在前端项目中,通常会使用许多第三方库和插件(如 npm 包)。Nexus 可以作为一个私有的 npm 仓库,帮助团队集中管理这些依赖项。具体作用包括:

  • 依赖统一管理:所有的依赖项都从 Nexus 获取,确保团队内部的一致性,避免因为不同版本的依赖导致的问题。
  • 缓存第三方库:将外部的 npm 包缓存到 Nexus 中,提高构建速度,减少对外部网络的依赖。
  • 自定义包管理:团队开发的自定义 npm 包可以发布到 Nexus,方便内部共享和版本管理。

# 2. 构件发布

前端项目构建后生成的构件(如打包后的静态文件、CSS、JS 文件等)可以发布到 Nexus 进行管理和存储。这样做的好处包括:

  • 版本控制:构件的每一个版本都可以存储在 Nexus 中,方便回滚和追溯历史版本。
  • 分发管理:其他团队或项目需要使用这些构件时,可以直接从 Nexus 中获取,避免了重复打包和构建的工作。

# 3. 安全性和权限控制

Nexus 提供细粒度的权限控制,可以确保只有授权的人员或团队才能访问和修改特定的构件和依赖项。这对于大型团队来说尤为重要,可以防止意外的修改或删除,保障项目的稳定性和安全性。

# 4. 构建优化

通过 Nexus 集中管理依赖项和构件,能够极大地优化前端项目的构建过程。具体表现在:

  • 加快构建速度:减少从外部获取依赖的时间,提高整体构建效率。
  • 提高构建稳定性:避免因为外部依赖项不可用或版本变化导致的构建失败。

# 5. 与 CI/CD 的集成

Nexus 可以与持续集成 / 持续部署(CI/CD)工具(如 Jenkins、GitLab CI 等)集成,自动化管理构件的发布和依赖项的更新。这样能够极大地提升开发和部署的效率,确保每一次构建和部署都是可重复和可靠的。

# 对于大型团队的开发管理的优势

  1. 一致性和稳定性:通过 Nexus 统一管理依赖项和构件,确保团队内部的一致性,避免因为不同版本的依赖导致的问题。
  2. 安全性:细粒度的权限控制和访问日志,确保构件的安全性和可追溯性。
  3. 提高效率:优化构建和发布流程,减少重复劳动,提高开发和部署的效率。
  4. 版本控制:便捷的版本管理和回滚机制,确保在需要时能够快速回到稳定版本。
  5. 降低风险:通过缓存和集中管理外部依赖项,降低外部服务不可用对项目的影响。

# 使用 nexus 搭建 npm 私服

贴一些文章链接,以备不时之需:

# VueUse——Vue 中的 Hooks 工具库

记录一些平时在开发的过程中接触到的一些 hooks。

# createGlobalState

Keep states in the global scope to be reusable across Vue instances.

# 规范组件库项目的开发标准、流程

# sucrase—— 一款超高速的 JS 编译器

# 概念

Sucrase 是一款 JavaScript/TypeScript 编译器,目标是提供比标准 Babel 编译器更快的构建速度。 更快的构建意味着更快的迭代,特别是在大型代码基上进行测试的时候。 一些测量结果显示,与 Babel 相比,Sucrase 速度提高了 4 至 20 倍。Sucrase 专注于在开发阶段提供极快的编译速度,这使得它在开发环境中非常受欢迎。

以下是 Sucrase 的一些特点:

  1. 速度快:Sucrase 通过简化编译过程并避免一些复杂的编译步骤,能够实现非常快的编译速度。
  2. 支持现代 JavaScript 特性:Sucrase 支持 ES6+ 特性,包括模块语法、箭头函数、解构赋值等。
  3. 支持 TypeScript:Sucrase 可以编译 TypeScript 代码,但它不会进行类型检查,只负责将 TypeScript 代码转换为 JavaScript。
  4. 支持 JSX:Sucrase 也支持 JSX 语法,这使得它非常适合用于 React 项目。
  5. 开发友好:由于其快速的编译速度,Sucrase 在开发环境中能提供很好的开发体验,减少了编译时间,提升了开发效率。

在项目中使用 Sucrase 通常是在开发阶段,通过它快速转换代码,而在生产阶段可能会选择更全面的编译器如 Babel 进行代码转换和优化。

你可以通过以下方式安装 Sucrase:

npm install --save-dev sucrase

然后可以通过命令行或在构建工具中配置使用 Sucrase 进行代码编译。

# 一些比较

# sucrase-node 和 ts-node 执行 ts 代码的比较

Sucrase-node 和 ts-node 都是用于在 Node.js 环境下直接运行 TypeScript 代码的工具,但它们在实现和性能方面有一些显著的差异。以下是 Sucrase-node 相较于 ts-node 的主要优势,以及为什么你可能会选择前者来执行 TypeScript 代码:

  1. 性能

Sucrase-node 的编译速度通常比 ts-node 快得多。Sucrase 专注于速度,通过简化编译步骤并省略类型检查,能显著提高编译速度。这使得 Sucrase-node 特别适合开发阶段,减少了启动时间和代码变更后的重新编译时间,提高了开发效率。

  1. 开发体验

由于 Sucrase-node 的快速编译速度,开发者在进行快速迭代和调试时会有更好的体验。减少了等待时间,可以更快地看到代码的变化结果。

  1. 简化的编译过程

Sucrase 主要专注于语法转换,而不是类型检查。这意味着它只负责将 TypeScript 和现代 JavaScript 语法转换为标准的 JavaScript,不会进行任何类型检查。这在开发过程中可能是一个优势,因为它减少了不必要的编译步骤。不过,这也意味着在生产环境中你可能仍然需要使用其他工具来进行全面的类型检查。

为什么选择 Sucrase-node 执行 TypeScript?

  1. 速度:如果你的项目在开发过程中需要频繁地编译和重启,那么 Sucrase-node 的快速编译速度可以显著提高你的开发效率。
  2. 简单性:Sucrase-node 省略了类型检查,因此在处理简单的开发任务或原型开发时,可以提供更轻量级的体验。
  3. 减少等待时间:更短的启动和重编译时间让你在开发过程中可以更专注于编写代码,而不是等待编译完成。

什么时候选择 ts-node?

  1. 类型检查:如果你的项目需要严格的类型检查,确保类型安全性,那么 ts-node 是更好的选择,因为它结合了 TypeScript 编译器,能够在运行时进行全面的类型检查。
  2. 生产环境:在生产环境中,确保代码的类型安全性非常重要,因此 ts-node 可能更适合。

结论

在开发阶段,特别是在需要快速迭代和频繁重启的情况下,Sucrase-node 的速度优势非常明显,能显著提高开发效率。然而,在生产阶段,或在需要严格类型检查的场景下,ts-node 可能是更好的选择。

你可以根据你的项目需求和开发阶段,选择最合适的工具。如果你需要快速的开发反馈,可以使用 Sucrase-node;如果你需要更严格的类型检查和安全性保障,可以使用 ts-node。

# 和使用 Babel 编译 JS 代码的比较

使用 Sucrase 编译 JavaScript 代码时,不需要像 Babel 那样编写复杂的 babel.config.json.babelrc 配置文件。Sucrase 的配置相对简单,它的设计目标是提供一个开箱即用的解决方案,减少配置的复杂性。

以下是使用 Sucrase 的基本步骤:

安装 Sucrase

首先,安装 Sucrase:

npm install --save-dev sucrase

使用命令行编译

你可以直接使用 Sucrase 提供的命令行工具进行编译,无需额外配置。比如,你可以编译一个包含现代 JavaScript 特性的文件:

npx sucrase ./src -d ./dist --transforms imports,jsx

在上面的命令中:

  • ./src 是源代码目录。
  • ./dist 是输出目录。
  • --transforms 指定了要应用的转换,这里包括 importsjsx

使用 sucrase-node

如果你需要在 Node.js 环境下直接运行 TypeScript 或现代 JavaScript 代码,可以使用 sucrase-node

npx sucrase-node src/index.ts

这样你可以直接运行 TypeScript 或 JavaScript 文件,Sucrase 会在后台进行必要的转换。

使用 sucrase-register

如果你希望在项目中全局注册 Sucrase,可以使用 sucrase/register 来设置运行时转换:

require('sucrase/register');
require('./src/index.ts');

这样在运行时,所有的 TypeScript 文件都会通过 Sucrase 进行转换。

使用配置文件

虽然 Sucrase 不需要像 Babel 那样的详细配置文件,但你可以通过在命令行指定一些基本的选项来控制编译行为。常用的选项包括:

  • --transforms :指定要应用的转换,如 jsxtypescriptimports 等。
  • --enable-legacy-type-imports :支持旧版的 TypeScript 类型导入语法。
  • --jsx-pragma--jsx-fragment-pragma :自定义 JSX 的 pragma 和 fragment pragma。

示例

例如,你可以在 package.json 中添加一个脚本,以便更方便地运行编译任务:

{
  "scripts": {
    "build": "sucrase ./src -d ./dist --transforms imports,jsx"
  }
}

然后你可以使用 npm run build 来编译代码。

总结

Sucrase 的设计使其使用起来非常简便,无需像 Babel 那样编写复杂的配置文件。大部分情况下,只需通过命令行指定一些基本选项即可完成编译任务。这使得 Sucrase 非常适合在开发阶段快速进行代码转换和运行。

# 目前主流的几种 JS/TS 编译器

# 1. Babel

Babel 是一个广泛使用的 JavaScript 编译器,支持最新的 JavaScript 特性,并且可以将现代 JavaScript 代码转换为兼容性更好的旧版 JavaScript 代码。

主要使用场景:

  • 跨浏览器兼容性:将现代 JavaScript 代码转换为适用于老旧浏览器的代码。
  • React 项目:编译 JSX 语法。
  • 使用现代 JavaScript 特性:支持最新的 ECMAScript 标准和提案。
  • 代码转换插件:如编译装饰器、类属性、可选链等。

# 2. TypeScript (tsc)

TypeScript 编译器(tsc)是 TypeScript 官方提供的编译器,用于将 TypeScript 代码编译为 JavaScript。

主要使用场景:

  • 类型检查:提供静态类型检查,提升代码的安全性和可维护性。
  • 开发大型应用:在大型项目中,TypeScript 的类型系统有助于减少错误和提高代码质量。
  • 与 JavaScript 集成:可以逐步将现有的 JavaScript 项目迁移到 TypeScript。

# 3. Sucrase

Sucrase 是一个专注于编译速度的 JavaScript/TypeScript 编译器,适用于开发环境。

主要使用场景:

  • 快速开发迭代:通过快速编译提供良好的开发体验。
  • 简单的语法转换:专注于现代 JavaScript 和 TypeScript 语法的转换,不进行类型检查。
  • React 项目:支持 JSX 语法。

# 4. SWC (Speedy Web Compiler)

SWC 是一个用 Rust 编写的超快速 JavaScript/TypeScript 编译器,兼具高性能和丰富的功能。

主要使用场景:

  • 高性能编译:适用于需要快速编译速度的大型项目。
  • React 项目:支持编译 JSX 语法。
  • 跨平台构建工具:与 Webpack、Rollup 等构建工具集成,替代 Babel 进行代码转换。

# 5. esbuild

esbuild 是一个超快速的 JavaScript/TypeScript 构建工具和编译器,同样是用 Go 编写的。

主要使用场景:

  • 超快速构建:适用于需要极快构建速度的开发环境。
  • 打包工具:可以作为打包工具使用,与其他构建工具集成,如 Webpack、Rollup。
  • 现代语法支持:支持最新的 JavaScript 和 TypeScript 语法转换。

# 6. Parcel

Parcel 是一个零配置的打包工具,内置了支持 TypeScript 和 Babel 的编译功能。

主要使用场景:

  • 快速上手:适用于不希望编写复杂配置文件的项目。
  • 支持多种语言和文件类型:自动处理不同类型的文件,如 JavaScript、TypeScript、CSS 等。
  • 适用于小型到中型项目:提供快速的开发体验和良好的默认配置。

# 7. Rollup

Rollup 是一个 JavaScript 模块打包工具,专注于生成高效、紧凑的代码包。可以与 Babel 或其他编译器结合使用。

主要使用场景:

  • 库和框架开发:适用于生成高效、紧凑的代码包。
  • 模块打包:支持 ES 模块语法,适合用于现代 JavaScript 项目。
  • 与 Babel 集成:通过 Babel 插件进行代码转换和优化。

# 总结

选择适合的编译器取决于你的项目需求、开发环境和性能要求。Babel 和 TypeScript (tsc) 是最为常用的编译器,适用于各种项目和场景。而 Sucrase、SWC 和 esbuild 则提供了极快的编译速度,适合在开发阶段使用。Parcel 和 Rollup 则是适合特定场景的打包工具,分别提供了零配置和高效打包的优势。

# 处理命令行参数的 npm 包

  1. chalk
  2. yargs