如何欺骗 Node.js 将 .js 文件加载为 ES6 模块？

Question

Node.JS 10 添加了对加载 ES6 模块的实验性支持，这些模块已经在浏览器中运行。这意味着我们最终可以为 Node.JS 和浏览器使用完全相同的文件，而无需任何转译或 polyfill。

除非我们不能。 Node.js 需要 .mjs 扩展名才能将文件作为模块加载。我尝试使用符号链接来欺骗节点，但节点绕过了它：

D:\web\lines>node --experimental-modules ES6test.mjs
(node:7464) ExperimentalWarning: The ESM module loader is experimental.
D:\web\lines\ES6test.js:6
import myLibrary from "./MyFile.mjs";
       ^^^^^^^^^^^^^^^

我想不出任何其他的解决方法来完成这项工作 - 这真的会使整个 ES6 模块支持变得无用。

其他人能想出一些技巧让 Node.js 忽略扩展吗？

Answer 1

您现在可以在节点 v12.x 中导入 .js 文件，分两步：

• 在您的 package.json 文件中添加以下行：

// package.json
{
  "type": "module"
}

• 在脚本之前添加--experimental-modules标志：

node --experimental-modules index.js

参考：https://nodejs.org/api/esm.html

Answer 2

Node.js 要求所有 ES 模块都应具有 .mjs 扩展名。由于 ES 模块的 Node.js 支持是实验性的，因此可能会发生变化。 A proposal 和 open pull request 有望通过 package.json esm 标志和 --mode 选项解决此问题。

目前这可以通过自定义ES module loader 解决，该ES module loader 挂钩到默认模块解析器并更改某些模块的模块类型：

custom-loader.mjs

import path from 'path';

const ESM_WITH_JS_EXT = './MyFile.js'; // relative to loader path
const ESM_WITH_JS_EXT_URL = new URL(path.dirname(import.meta.url) + `/${ESM_WITH_JS_EXT}`).href;

export function resolve(specifier, parentModuleURL, defaultResolver) {
    const resolvedModule = defaultResolver(specifier, parentModuleURL);

    if (resolvedModule.url === ESM_WITH_JS_EXT_URL)
        resolvedModule.format = 'esm';

    return resolvedModule;
}

它被用作：

node --experimental-modules --loader ./custom-loader.mjs ./index.mjs

由于 ES 和 CommonJS 模块的评估方式存在根本差异，因此更改应仅限于需要它们的模块。

Answer 3

我用绝妙的esm 包解决了这个问题。您可以启用动态（智能） esm 模块加载包范围，或使用如下标志每次运行：

node -r esm your/es6/module.js

它还具有将每个文件视为 es6 模块的选项，或者仅将那些以 '.mjs' 结尾的文件。那里还有其他软件包，但这个刚刚好用。

Answer 4

使用适用于 Node.js 的 ES6 导入和导出模块

使用.mjs 扩展名而不是.js 命名文件

创建文件

touch main.mjs lib.mjs

main.js

import { add } from './lib.mjs';
console.log(add(40, 2));

lib.mjs

export let add = (x,y) => {
  return x + y
}

运行

node --experimental-modules main.js

Answer 5

这里有一个模块可以满足您的需求esmjs.mjs

import { readFileSync } from 'fs'
import { fileURLToPath, pathToFileURL } from 'url'
import { dirname, join } from 'path'

export const jsmodule = (test_url_or_path, module_path) => {

    const __filename = test_url_or_path.toLowerCase().startsWith('file:')
        ? fileURLToPath(test_url_or_path)
        : test_url_or_path

    const __dirname = dirname(__filename)

    const abs_path = join(__dirname, module_path)
    const file_url = pathToFileURL(abs_path)

    const file_buf = readFileSync(file_url)
    const b64 = file_buf.toString('base64')

    const moduleData = "data:text/javascript;base64," + b64

    return import(moduleData)
}

来自.mjs模块的用法：

const { hey } = await jsmodule(import.meta.url, '../../test-data/mjs.js')

用法，来自.js文件：

const { hey } = await jsmodule(__filename, '../../test-data/mjs.js')

Reference & tests on Github

Answer 6

你可以这样做：

创建一个文件module2.mjs（名称由你决定）

'use strict';

export function foo() {
    return 'foo';
}

创建 index.mjs 文件：

'use strict';

import { foo } from './module2.mjs';

console.log(foo());

使用节点 8.11.1（或 10），您可以运行它（提供命令和输出）：

node --experimental-modules index.mjs
(node:60428) ExperimentalWarning: The ESM module loader is experimental.
foo