path.join 在 require 语句中

Question

我尝试在require 语句中使用Path.join，如下所示：

import Path from 'path'

const assetPath = Path.join(process.cwd(), `./lib/asset-manifest.json`)

console.log(assetPath)
'/home/dev/Website/lib/asset-manifest.json'

console.log(
  assetPath === '/home/dev/Website/lib/asset-manifest.json'
)
true

const assets = require(assetPath)

但这会引发以下错误：

Error: Cannot find module '/home/dev/Website/lib/asset-manifest.json'

虽然文件在那里并且require 工作，但如果我手动将字符串放入其中：

const assets = require('/home/dev/Website/lib/asset-manifest.json')

所以我想知道为什么Path.join 不能在require 中工作？

最好的问候

Answer 1

import path from 'path';

// you can use process.cwd() if you want
const assetPath = path.join(path.dirname(require.main.filename), `lib/asset-manifest`);

const test = () => {
  var assets = require(assetPath);
  console.log(assets);
};

export default test();

您需要将 require 包围在函数内。否则 require 将在路径分配给assetPath 变量之前运行。这是因为 require 是 SYNC 并且从调用它的文件或函数的角度运行。因为你说这是必需的，所以它会在其他任何事情之前立即执行。

前进的最佳实践是停止对 json 文件使用 require。需要缓存内容，因此如果生产环境中的 JSON 文件发生更改，您的用户可能会获得旧数据。而是使用fs.readfile(path, (err, data) => JSON.parse(data))

有一个 webpack 配置你可能想在你的情况下尝试。

WEBPACK DOCS: Don't Check Require Dependencies

WEBPACK DOCS: Generate Require Func

const requireJSON = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
const assets = requireJSON(assetPath);

这应该返回所有可能的需求路径。

Answer 2

webpack 是一个静态模块捆绑器，这里的require 不像nodejs 中的require 。

前一个包含静态编译阶段的文件，另一个包含运行时的文件。

您的情况，const assets = require(assetPath)，assetPath 未在静态编译阶段定义，这就是抛出错误的原因。

让我们看看捆绑的结果：

// const assets = require(assetPath);
const assets = await __webpack_require__("./ lazy recursive")(assetPath);

// below is the "./ lazy recursive" module
function webpackEmptyAsyncContext(req) {
    // Here Promise.resolve().then() is used instead of new Promise() to prevent
    // uncaught exception popping up in devtools
    return Promise.resolve().then(() => {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    });
}
webpackEmptyAsyncContext.keys = () => ([]);
webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
webpackEmptyAsyncContext.id = "./ lazy recursive";
module.exports = webpackEmptyAsyncContext