Ionic 3(A5)+NW.js环境下require('os')/fs跨文件调用结果异常问询

这个问题我之前做NW.js+Ionic项目时也碰到过，核心原因是Ionic默认的构建流程（基于Webpack）会把Node.js核心模块替换为浏览器兼容的模拟版本，而index.html里的脚本是直接在NW.js的Node运行环境执行，没经过打包处理，所以能拿到原生模块。下面是具体的解决步骤：

1. 修改Webpack配置，保留原生Node模块 #

Ionic 3的Webpack配置默认会对Node核心模块做polyfill或替换，我们需要告诉Webpack不要处理os、fs这些模块，让NW.js的Node环境直接接管：

• 先在项目根目录创建自定义的webpack.config.js文件（没有的话新建），内容如下：

const webpackConfig = require('@ionic/app-scripts/config/webpack.config');

module.exports = function () {
  // 同时修改开发和生产环境的配置
  Object.keys(webpackConfig).forEach(env => {
    webpackConfig[env].node = {
      // 告诉Webpack不要模拟这些Node模块，保留原生require调用
      fs: false,
      os: false,
      // 如果还用到其他Node模块（比如path、child_process），也一并添加
      path: false
    };
  });
  return webpackConfig;
};

• 接着在ionic.config.json里指定使用这个自定义配置：

{
  "name": "你的应用名称",
  "app_id": "",
  "type": "ionic-angular",
  "webpackConfig": "./webpack.config.js"
}

2. 确保TypeScript能识别Node类型 #

你已经安装了@types/node，还需要在tsconfig.json里配置类型引用，让TS编译时能正确识别Node模块的类型：

{
  "compilerOptions": {
    // 其他原有配置...
    "types": ["node"]
  }
}

如果还是有临时类型报错，可以在TS文件顶部添加声明语句绕过检查：

declare var require: any;

3. 避免Polyfill干扰 #

检查src/polyfills.ts文件，看看有没有引入针对Node模块的浏览器polyfill（比如core-js相关的），如果有的话注释掉对应的行，避免覆盖原生模块。

4. 测试验证 #

在你的TS文件里重新测试代码：

import * as os from 'os';
import * as fs from 'fs';

console.log('当前系统平台:', os.platform()); // 现在应该返回'darwin'
console.log('FS模块内容:', fs); // 应该返回完整的fs对象

或者用require方式：

const os = require('os');
const fs = require('fs');

console.log('当前系统平台:', os.platform());
console.log('FS模块内容:', fs);

为什么会出现这个差异？ #

• index.html里的<script>标签是直接在NW.js的Node.js运行时中执行的，没有经过Ionic的Webpack打包编译，所以require()直接调用的是NW.js提供的原生Node模块。
• 而TS文件会被Ionic的Webpack编译打包，默认配置下Webpack会把os、fs这类Node核心模块替换为浏览器兼容的模拟版本（比如os的browser版本固定返回'browser'，fs返回空对象），这是为了让应用能在普通浏览器中运行，但不符合NW.js的Node环境需求。

内容的提问来源于stack exchange，提问作者Prasoon