在 JavaScript 中,可以通过多种方式来判断前端应用的运行环境,比如浏览器环境、Node.js 环境、React Native 环境等。以下是一些常见的方法:
目录
1. 判断是否在浏览器环境中
2. 判断是否在 Node.js 环境中
3. 判断是否在 React Native 环境中
4. 判断是否在 Electron 环境中
5. 判断是否在微信小程序环境中
6. 判断是否在 Vue.js 环境中
7. 判断是否在 Angular 环境中
8. 判断是否在 React 环境中
9. 开发环境与生产环境检测
10. 判断是否是移动端
11. 判断是否是 iPad
12. 判断是否是 iPhone
13. 判断是否是微信
14. 判断是否是 QQ
15. 判断是否是 iOS 设备
16. 判断是否是 Android 设备
1. 判断是否在浏览器环境中
使用 typeof window
//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
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
//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
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
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
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
对象
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
对象
if (typeof ng !== 'undefined') {console.log('Running in an Angular environment');
} else {console.log('Not running in an Angular environment');
}
8. 判断是否在 React 环境中
使用 React
对象
if (typeof React !== 'undefined') {console.log('Running in a React environment');
} else {console.log('Not running in a React environment');
}
9. 开发环境与生产环境检测
//环境变量的命名实际情况而定
let isDev = process.env.VUE_APP_MODE == 'dev';
if (isDev) {// 开发环境相关的代码
} else {// 生产环境相关的代码
}
10. 判断是否是移动端
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
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
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. 判断是否是微信
function isInWeChat() {return /MicroMessenger/i.test(navigator.userAgent);
}if (isInWeChat()) {console.log('Running in WeChat');
} else {console.log('Not running in WeChat');
}
14. 判断是否是 QQ
function isInQQ() {return /QQ/i.test(navigator.userAgent);
}if (isInQQ()) {console.log('Running in QQ');
} else {console.log('Not running in QQ');
}
15. 判断是否是 iOS 设备
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 设备
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');
}
通过这些方法,你可以根据不同的环境变量和全局对象来判断前端应用的运行环境。如有不足或错误请指出