gpt4 book ai didi

javascript - 一个 .mjs 文件,可在浏览器和 NodeJS 上使用 native JS 模块

转载 作者:行者123 更新时间:2023-11-30 19:00:44 24 4
gpt4 key购买 nike

很抱歉,如果这个问题得到了回答,我尝试搜索但找不到我要找的东西。

我想构建一个 .mjs 文件,其中包含一个我可以在浏览器和 Node.js 上使用的库类代码。我不想使用 browsify 或任何第 3 方库。我想使用 native JS 模块 (.mjs)。我愿意使用 Node 13.x,所以我将 require 语句完全替换为 import 并运行实验模式。

这是一个示例,我想为 NodeJS 使用“node-fetch”,为浏览器使用 native fetch API。所以我称我的变量为“fetch”。但我想做一个 if 语句,这样如果我在浏览器中运行,我可以只使用 native fetch,但如果我在 Node 中,我想从 node-fetch 包。

fetch.mjs - 共享代码

//if node then do this.. else fetch will be defined in the browser
import fetch from "node-fetch"

export class AwesomeClass {

constructor(url)
{

this.url= url;

}

load () {

return fetch(this.url);
}
getAwesome() {}

}

index.mjs 节点 JS 客户端

import { AwesomeClass } from "./fetch.mjs"
const a = new AwesomeClass();

index.html 浏览器客户端

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type = 'module'>
import { AwesomeClass } from "./fetch.mjs"

const a = new AwesomeClass();

</script>
</body>
</html>

最佳答案

感谢@Heretic Monkey为了向我介绍动态 import,我能够编写一个可在浏览器和节点 js 上运行的 .mjs 文件。这是感兴趣的人的代码。

它实际上迫使我只在需要时加载提取。

fetch.mjs 库

export class AwesomeClass {

constructor(url)
{

this.url= url;

}

load () {

return import ("node-fetch").then(nodeFetch => nodeFetch.default(this.url)).catch(e=> fetch(this.url))

}
getAwesome() {}

}

index.mjs(node.js 客户端)

import {AwesomeClass} from './fetch.mjs'

const ac = new AwesomeClass("https://api.github.com");

(async () => {
try{
const res = await ac.load();
console.log(await res.json());
}
catch(e)
{console.error(e)}

})()

index.html(浏览器)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type = 'module'>
import {AwesomeClass} from './fetch.mjs'

const ac = new AwesomeClass("https://api.github.com");


(async () => {
try{
const res = await ac.load();
console.log(await res.json());
}
catch(e)
{console.error(e)}

})()
</script>
</body>
</html>

关于javascript - 一个 .mjs 文件,可在浏览器和 NodeJS 上使用 native JS 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59536593/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com