如何在一个JavaScript文件中使用仅npm包和普通npm包的ESM ?

Question

好的，所以我是一个相对较新的web开发。我试图在我的index.js文件中需要两个包，即franc和lang。因此，法郎现在是ESM唯一的包，我必须导入它，并在我的包中提到type:module。json文件。但是如果我这样做，我就不能要求langs包。如果我尝试导入它，它显然会返回一个promise。如果我试图访问lang的函数，它会说它不是函数。例如。

import {franc} from 'franc'
const langs = import('langs');
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

它表示语言。这里不是函数。有人能帮忙吗?

这里是返回的承诺如果我写这段代码

import {franc} from 'franc'
const langs = import('langs');
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
setTimeout(function(data){
console.log(langs)
}, 1000)

输出

afr
Promise {
[Module: null prototype] {
default: {
all: [Function: allLanguages],
has: [Function: hasLanguage],
codes: [Function: getCodes],
names: [Function: getNames],
where: [Function: findBy]
}
}
}

Answer 1

要正确导入库，您需要执行以下任何操作

import {franc} from 'franc'
import langs from 'langs'
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

import {franc} from 'franc'
const langs = require('langs');
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

import {franc} from 'franc'
const langsModule = await import('langs');
let langs = langsModule.default;
const langCode = franc('Alle menslike wesens word vry')
console.log(langCode)
console.log(langs.where("3", "kor"));

我个人建议采用第一条路线，但从技术上讲，这三条路线都应该可行。关于import语句的更多信息可以在MDN Web Docs中找到。

关于三个选项的区别:

• 第一个选项利用ES6模块功能导入lang包的默认导出。
• 第二个选项使用与第一个相同的方法，但特别利用ES6模块的动态导入功能。这需要等待文件加载并选择默认属性，但提供了异步加载文件的选项。第三个选项使用CommonJS方法来加载依赖项。使用此方法，您只能导入默认导出，这意味着需要加载整个文件，这限制了性能。这也必须同步完成。

这篇文章有助于定义ES6和CommonJS方法之间的一些差异。