编写跨浏览器/NodeJS脚本：方案合理性及打包报错咨询

问题描述 #

我编写了如下代码，尝试用browser-or-node判断运行环境，在浏览器中修改页面背景色，在Node环境下导入同目录的myLittleScript（该文件封装了Node.js的fs模块）：

import { isBrowser, isNode } from "browser-or-node";

// 加载时运行
async function run() {
  if (isBrowser) {
    document.body.style.backgroundColor = "black";
    
  } else if (isNode) {
    const fs = await import("./myLittleScript");
    console.log(fs);
  }
}

run()

但使用Webpack打包时出现了「脚本未找到」的错误，myLittleScript明明和index.ts在同一目录。我想确认这个兼容思路是否可行，以及正确的实现方案是什么（我知道可以拆分成两个函数，但想确认当前方案的可行性）。

解答 #

1. 思路可行性 #

核心思路是可行的，但Webpack的静态分析机制会打破这个条件导入的预期，导致打包时出现错误。

2. 错误原因 #

Webpack会静态扫描代码里所有的import（包括动态import()）路径，不管代码里的条件判断逻辑。也就是说，哪怕你把import("./myLittleScript")放在isNode的分支里，Webpack打包浏览器版本时，依然会尝试去查找这个文件并打包进去。如果这个文件只包含Node专属的API（比如fs），要么会因为浏览器环境下无法识别模块而报错，要么会直接找不到文件（如果你只在Node环境下保留这个文件的话）。

3. 正确实现方案 #

方案一：用Webpack别名/外部依赖区分环境

针对不同打包环境，给./myLittleScript设置不同的指向：

• 打包浏览器版本时，把它指向一个空的占位模块，避免Webpack报错；
• 打包Node版本时，指向实际的模块文件。

示例Webpack配置（浏览器环境）：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      './myLittleScript$': path.resolve(__dirname, './emptyModule.js')
    }
  }
}

其中emptyModule.js只需要导出空对象即可：

export default {};

方案二：用环境变量让Webpack剔除无用分支

利用Webpack的DefinePlugin注入环境变量，让Webpack在静态分析时直接删掉不符合当前环境的代码分支，根本不会去处理不需要的导入。

修改代码：

async function run() {
  if (process.env.RUN_ENV === 'browser') {
    document.body.style.backgroundColor = "black";
  } else if (process.env.RUN_ENV === 'node') {
    const fs = await import("./myLittleScript");
    console.log(fs);
  }
}

run();

然后在Webpack配置中添加插件：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.RUN_ENV': JSON.stringify('browser') // 打包Node时改成'node'
    })
  ]
}

这样Webpack打包时会直接移除对应环境不需要的代码，不会尝试导入不存在的模块。

方案三：拆分入口文件（最清晰的方案）

虽然你提到知道可以拆分，但这是最不容易出问题的方式：分别创建browser.ts和node.ts作为两个入口文件，各自处理对应环境的逻辑，Webpack分别打包这两个入口，彻底避免环境冲突。

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