Question

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

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);

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

Answer 2

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

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

您的情况 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

在require语句中加入path.join

2 个答案: