Node/Webpack 5：ES6环境下加载package.json的跨环境路径适配问题问询

你遇到的这个问题很典型——Webpack在打包Node.js项目时，会静态解析path.join这类路径计算代码，把它替换成你本地的绝对路径，导致打包后的脚本在其他环境找不到文件。下面给你几个可行的解决方案，按需选择：

方案一：用process.cwd()动态获取项目根路径 #

这个方法不需要修改Webpack配置，靠运行时的工作目录来定位package.json，完全避开静态路径解析的问题。

修改你的src/api/package-json.js：

import fs from 'fs-extra'
import path from 'path'

// 运行时当前工作目录就是项目根目录（只要你在根目录下启动脚本）
const PKG_FILE = path.join(process.cwd(), 'package.json')
const pkg = JSON.parse(fs.readFileSync(PKG_FILE))
export default pkg

优缺点：

• 优点：无需调整Webpack配置，package.json更新后无需重新打包就能读取到最新内容
• 注意：要确保运行打包后的脚本时，当前工作目录是项目根目录（比如用node dist/server/app.cjs而不是从其他目录全路径启动）

方案二：用Webpack DefinePlugin注入package.json字段 #

如果只需要package.json里的特定字段（比如name、version），可以直接在打包时把这些值注入到代码中，彻底避免文件读取操作。

首先修改webpack.config.js，导入项目根的package.json并配置DefinePlugin：

import path from 'path'
import { fileURLToPath } from 'url'
import webpack from 'webpack'
// 直接导入根目录的package.json
import rootPkg from './package.json'

const __dirname = path.dirname(fileURLToPath(import.meta.url))
const { NODE_ENV = 'production' } = process.env

export default {
  entry: './src/api/app.js',
  mode: NODE_ENV,
  target: 'node',
  node: {
    global: false,
    __filename: false,
    __dirname: false
  },
  output: {
    path: path.resolve(__dirname, 'dist', 'server'),
    filename: 'app.cjs'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  },
  externals: {
    'node-pty': 'commonjs2 node-pty'
  },
  // 添加DefinePlugin插件
  plugins: [
    new webpack.DefinePlugin({
      // 把需要的字段转成JSON字符串注入
      'process.env.PKG_NAME': JSON.stringify(rootPkg.name),
      'process.env.PKG_VERSION': JSON.stringify(rootPkg.version)
      // 按需添加其他字段
    })
  ]
}

然后在src/api/app.js里直接使用：

console.log(process.env.PKG_NAME)

优缺点：

• 优点：运行时不需要读取文件，性能更好，也没有路径问题
• 缺点：package.json字段更新后必须重新打包才能生效，适合字段不常变动的场景

方案三：直接导入package.json并让Webpack打包内容 #

Webpack允许直接导入JSON文件，你可以借助别名简化导入路径，同时让Webpack把package.json的内容打包进bundle里，省去手动读取的步骤。

先修改webpack.config.js配置根路径别名：

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  alias: {
    // 把~root指向项目根目录
    '~root': path.resolve(__dirname, './')
  }
}

然后修改src/api/package-json.js直接导入：

import pkg from '~root/package.json'
export default pkg

优缺点：

• 优点：代码最简洁，无需手动处理文件读取和路径
• 注意：package.json的所有内容都会被打包进bundle，如果里面有敏感信息（比如private字段、密钥），这个方法就不合适了

为什么原来的代码会出问题？ #

你原来用path.join(__dirname, '..', '..')计算根路径时，Webpack的静态解析会在打包阶段就把这个表达式计算成你本地的绝对路径（比如D:/dev/app-name），打包后的代码里就硬编码了这个路径，到了其他环境自然找不到文件。而上面的方案要么避开静态解析，要么直接把内容注入，都能解决这个问题。

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