运行 Babel 转译代码时需要 JSON 文件引发 Node.js 加载程序错误“错误：找不到模块'example.json'”

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 应该“做正确的事情”的代码依赖项（因为你require d 或import编辑它） - 或至少给你一个错误或警告。 但这不是 Babel 在这个用例中的设计方式。

您需要做额外的工作来复制数据文件。 我建议三个主要的替代方案可供选择：

1. 使用 WebPack 或 Gulp 之类的捆绑器，其中包含用于复制非 JS 文件的工具
2. 使用 Babel 的--copy-files复制所有内容。 您可以使用--ignore模式来避免复制您不想复制的内容。
3. Use something like the shx npm package which lets you run Unix-style filesystem commands in a cross-platform way from inside package.json scripts.

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

Answer 2

使用 __dirname + '/example.json'