require a JSON file throws a Node.js loader error "Error: Cannot find module 'example.json'" when running Babel transpiled code

Question

在 TypeScript 中构建代码时，有几个与导入或需要 JSON (.json) 文件相关的类似问题。我的问题具体是关于在使用 Babel（核心和 cli）转译到当前节点目标的 ES6 模块中需要一个 JSON 文件。我没有看到像 TypeScript 的 resolveJsonModule for Babel 这样的配置选项，这让我相信它应该在没有任何配置的情况下工作。

我正在从同一目录中的 JS 文件 (index.js) 导入 JSON 文件 (example.json)，方法是：

const myObj = {};
myObj.myJSON = require("./example.json");

我还尝试使用更新的 ES6 语法导入：

import * as myJson from "./example.json";

我正在使用 VSCode，在这两种情况下，自动完成都会向我建议源代码中 JSON 文件的正确相对路径。

目录如下：

src/
  |_dir/
    |_index.js
    |_example.json

在这两种情况下，当使用命令 babel-cli 进行转译时：babel src --out-dir build，生成的构建看起来像：

src/
  |_dir/
    |_index.js

出于某种原因，example.json 文件未包含在内，尽管编译的 index.js 文件中需要它：

...

const myObj = {};

myObj.myJSON = require("./example.json");
...

因此，当运行使用 node build/index.js 节点的转译构建时，它会抛出错误：

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module './example.json'
Require stack:
- ...
- .../build/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (.../index.js:15:25)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    ...
  ]
}

这里是相关配置：

package.json

  ...
  "scripts": {
    "build": "babel src --out-dir build",
    "start": "node build/index.js",
    ...
  },
  "devDependencies": {
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.8",
    ...
  },
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.16.8",
    ...
  }

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

Answer 1

我认为无聊的答案是 Babel 只处理 JavaScript 个文件。任何不是 JavaScript（例如 JSON）的东西都会被抛在后面，即使它“感觉”像 JSON 文件是一个代码依赖，Babel 应该“只做正确的事情”（因为你 required 或 imported 了它）——或者至少给你一个错误或警告。但这不是 Babel 在这个用例中的设计方式。

您需要做额外的工作来复制数据文件。我建议从三个主要备选方案中进行选择：

使用像 WebPack 或 Gulp 这样的捆绑器，它有用于复制非 JS 文件的工具
使用 Babel 的 --copy-files 复制所有内容。您可以加入 --ignore 模式，尽量避免复制您不想复制的内容。
使用类似于 shx npm 包的东西，它可以让你从 package.json 脚本内部以跨平台的方式运行 Unix 风格的文件系统命令。

"build": "babel src --out-dir build && npx shx cp src/*.json dist/"

require a JSON file throws a Node.js loader error "Error: Cannot find module 'example.json'" when running Babel transpiled code

require a JSON file throws a Node.js loader error "Error: Cannot find module 'example.json'" when running Babel transpiled code

javascript

json

node.js

node-modules

babeljs