javascript - 运行 Babel 转译代码时需要 JSON 文件会引发 Node.js 加载程序错误 "Error: Cannot find module ' example.json'"

Question

在 TypeScript 中构建代码时，有几个与导入或需要 JSON (.json) 文件相关的类似问题。我的问题特别是关于在 ES6 模块中需要一个 JSON 文件，该文件使用 Babel(核心和 cli)转换为当前 Node 目标。我没有看到像 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 运行带有 Node 的转译构建时，它会抛出错误:

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 或者导入编辑它)——或者至少给你一个错误或警告。但这不是 Babel 在此用例中的设计方式。

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

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

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