无法在模块外部使用“import.meta”

Question

我的Node + Express + Babel + ES6项目包含以下文件：

/package.json

{
  "name": "test-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "babel-node src/index.mjs",
    "build": "babel src --out-dir build",
    "start": "node build/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.19.6",
    "@babel/node": "^7.19.1",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "babel-plugin-module-extension": "^0.1.3"
  }
}

/.babelrc.js

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/transform-runtime', ['module-extension', { mjs: 'js' }]],
  sourceMaps: false,
  retainLines: false,
  minified: true,
};

/src/index.mjs

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import { sum } from './utils.mjs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

app.get('/', (req, res) => {
  const result = sum(3, 2);
  res.send(`current dir: ${__dirname} | sum(3, 2) = ${result}`);
})

const port = 8080;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

src/utils.mjs

export const sum = (num1, num2) => num1 + num2;

我可以使用以下命令正确测试该网站：

$ npm run dev

然后转到：http://localhost:8080

我可以使用以下命令正确构建网站：

$ npm run build

这将生成一个新目录：/build.

我的问题是：当我尝试使用命令运行构建的网站时：

$ npm start

我收到以下错误：SyntaxError: Cannot use 'import.meta' outside a module。下面是完整的错误：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> test-backend@1.0.0 start
> node build/index.js

D:\myproject\build\index.js:1
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _express=_interopRequireDefault(require("express"));var _path=_interopRequireDefault(require("path"));var _url=require("url");var _utils=require("./utils.js");var _filename=(0,_url.fileURLToPath)(import.meta.url);var _dirname=_path["default"].dirname(_filename);var app=(0,_express["default"])();app.get("/",function(req,res){var result=(0,_utils.sum)(3,2);res.send("current dir: ".concat(_dirname," | sum(3, 2) = ").concat(result))});var port=8080;app.listen(port,function(){console.log("Example app listening on port ".concat(port))});
                                                                                                                                                                                                                                                                                                               ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

该问题表明它是由以下几行引起的/src/index.mjs：

import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

这是转译后的/build/index.js

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _express = _interopRequireDefault(require("express"));
var _path = _interopRequireDefault(require("path"));
var _url = require("url");
var _utils = require("./utils.js");
var _filename = (0, _url.fileURLToPath)(import.meta.url);
var _dirname = _path["default"].dirname(_filename);
var app = (0, _express["default"])();
app.get("/", function (req, res) {
  var result = (0, _utils.sum)(3, 2);
  res.send("current dir: ".concat(_dirname, " | sum(3, 2) = ").concat(result));
});
var port = 8080;
app.listen(port, function () {
  console.log("Example app listening on port ".concat(port));
});

您可以在其中看到代码使用：import.meta.url这是冲突的行。

我的要求是：

• 需要获取当前的工作目录，因为我在那里有应用程序运行所需的资源。
• 需要源代码是：ES6这样我就可以使用类、导入、导出等。

关于如何进行这项工作有什么想法吗？

谢谢！

Answer 1

您需要构建 CommonJS 还是 ESM？

对于受支持的 Node 版本上的ESM 构建，您可以：

• 更新package.json

  "type": "module"
  

• 更新./babelrc.js：

    export default {
       presets: [['@babel/preset-env', { modules: false }]],
       // The rest is the same ...
    }
  

关于modules设定

将其设置为 false 将保留 ES 模块。

现在运行

npm run build
npm start

或者，您可以使用 babel 的--out-file-extension选项并.mjs在构建脚本中使用。您仍然需要更新@babel/preset-env以保留 ES 模块系统。我认为当你想使用 ES 模块"type": "module"时使用它会更干净、更清晰。package.json

对于CommonJS 构建，您需要：

• 将文件从 重命名.mjs为，以便确定模块系统的.js启发式不会在开发/构建运行的 ESM 和 CommonJS 之间切换。
• 删除 CommonJS 模块的使用import.meta并使用__dirname全局可用的模块。