JavaScript 中怎么判断前端各种运行环境

在 JavaScript 中，可以通过多种方式来判断前端应用的运行环境，比如浏览器环境、Node.js 环境、React Native 环境等。以下是一些常见的方法：

[1. 判断是否在浏览器环境中](#1. 判断是否在浏览器环境中)

[2. 判断是否在 Node.js 环境中](#2. 判断是否在 Node.js 环境中)

[3. 判断是否在 React Native 环境中](#3. 判断是否在 React Native 环境中)

[4. 判断是否在 Electron 环境中](#4. 判断是否在 Electron 环境中)

[5. 判断是否在微信小程序环境中](#5. 判断是否在微信小程序环境中)

[6. 判断是否在 Vue.js 环境中](#6. 判断是否在 Vue.js 环境中)

[7. 判断是否在 Angular 环境中](#7. 判断是否在 Angular 环境中)

[8. 判断是否在 React 环境中](#8. 判断是否在 React 环境中)

[9. 开发环境与生产环境检测](#9. 开发环境与生产环境检测)

[10. 判断是否是移动端](#10. 判断是否是移动端)

[11. 判断是否是 iPad](#11. 判断是否是 iPad)

[12. 判断是否是 iPhone](#12. 判断是否是 iPhone)

[13. 判断是否是微信](#13. 判断是否是微信)

[14. 判断是否是 QQ](#14. 判断是否是 QQ)

[15. 判断是否是 iOS 设备](#15. 判断是否是 iOS 设备)

[16. 判断是否是 Android 设备](#16. 判断是否是 Android 设备)

1. 判断是否在浏览器环境中

使用 typeof window

javascript 复制代码

//window对象在浏览器中作为全局对象存在的特点，在Node.js环境中不存在的。
if (typeof window !== 'undefined') {
  console.log('Running in a browser environment');
} else {
  console.log('Not running in a browser environment');
}

使用 navigator.userAgent

javascript 复制代码

if (typeof navigator !== 'undefined' && navigator.userAgent) {
  console.log('Running in a browser environment');
} else {
  console.log('Not running in a browser environment');
}

2. 判断是否在 Node.js 环境中

使用 typeof module 和 typeof require ``

javascript 复制代码

//Node.js环境有一个全局对象global，这在浏览器中是不存在的
if (typeof module !== 'undefined' && module.exports && typeof require === 'function') {
  console.log('Running in a Node.js environment');
} else {
  console.log('Not running in a Node.js environment');
}

3. 判断是否在 React Native 环境中

使用 typeof global

javascript 复制代码

if (typeof global !== 'undefined' && global.__fbBatchedBridge) {
  console.log('Running in a React Native environment');
} else {
  console.log('Not running in a React Native environment');
}

4. 判断是否在 Electron 环境中

使用 process.versions.electron

javascript 复制代码

if (typeof process !== 'undefined' && process.versions && process.versions.electron) {
  console.log('Running in an Electron environment');
} else {
  console.log('Not running in an Electron environment');
}

5. 判断是否在微信小程序环境中

使用 typeof wx

javascript 复制代码

if (typeof wx !== 'undefined' && wx.getSystemInfo) {
  console.log('Running in a WeChat Mini Program environment');
} else {
  console.log('Not running in a WeChat Mini Program environment');
}

6. 判断是否在 Vue.js 环境中

使用 Vue 对象

javascript 复制代码

if (typeof Vue !== 'undefined') {
  console.log('Running in a Vue.js environment');
} else {
  console.log('Not running in a Vue.js environment');
}

7. 判断是否在 Angular 环境中

使用 ng 对象

javascript 复制代码

if (typeof ng !== 'undefined') {
  console.log('Running in an Angular environment');
} else {
  console.log('Not running in an Angular environment');
}

8. 判断是否在 React 环境中

使用 React 对象

javascript 复制代码

if (typeof React !== 'undefined') {
  console.log('Running in a React environment');
} else {
  console.log('Not running in a React environment');
}

9 . 开发环境与生产环境检测

javascript 复制代码

                      //环境变量的命名实际情况而定
let isDev = process.env.VUE_APP_MODE == 'dev';
if (isDev) {
    // 开发环境相关的代码
} else {
    // 生产环境相关的代码
}

10. 判断是否是移动端

javascript 复制代码

function isMobile() {
  return /Mobi|Android/i.test(navigator.userAgent);
}

if (isMobile()) {
  console.log('Running on a mobile device');
} else {
  console.log('Not running on a mobile device');
}

11. 判断是否是 iPad

javascript 复制代码

function isiPad() {
  return /iPad/i.test(navigator.userAgent);
}

if (isiPad()) {
  console.log('Running on an iPad');
} else {
  console.log('Not running on an iPad');
}

12. 判断是否是 iPhone

javascript 复制代码

function isiPhone() {
  return /iPhone/i.test(navigator.userAgent) && !isiPad();
}

if (isiPhone()) {
  console.log('Running on an iPhone');
} else {
  console.log('Not running on an iPhone');
}

13. 判断是否是微信

javascript 复制代码

function isInWeChat() {
  return /MicroMessenger/i.test(navigator.userAgent);
}

if (isInWeChat()) {
  console.log('Running in WeChat');
} else {
  console.log('Not running in WeChat');
}

14. 判断是否是 QQ

javascript 复制代码

function isInQQ() {
  return /QQ/i.test(navigator.userAgent);
}

if (isInQQ()) {
  console.log('Running in QQ');
} else {
  console.log('Not running in QQ');
}

15. 判断是否是 iOS 设备

javascript 复制代码

function isiOS() {
  return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}

if (isiOS()) {
  console.log('Running on an iOS device');
} else {
  console.log('Not running on an iOS device');
}

16. 判断是否是 Android 设备

javascript 复制代码

function isAndroid() {
  return /Android/i.test(navigator.userAgent);
}

if (isAndroid()) {
  console.log('Running on an Android device');
} else {
  console.log('Not running on an Android device');
}

通过这些方法，你可以根据不同的环境变量和全局对象来判断前端应用的运行环境。如有不足或错误请指出