如何基於瀏覽器兼容性導入/導出模塊

Question

我正在嘗試為 IE11 導入一個模塊， https: //react-hook-form.com/faqs/，然后在另一個文件中重新導入它。

// utils/index.js
let loadModule;

if (isIE11) {
    loadModule = require('react-hook-form/dist/index.ie11');
} else {
    loadModule = require('react-hook-form');
}

module.exports = { ...loadModule };

// import it in another file

import {useForm} from './utils/index';
...

問題是這是否可以通過導入/導出來實現，以及我的代碼是否是處理這種情況的正確方法

Answer 1

現在的問題是，如果這是可能做到這一點的import / export ，如果我的代碼將處理這種情況的正確方法

不import / export報關，沒有。 但是使用動態導入（ import() ，ES2020 的一部分）和頂級await （目前是第 3 階段，但可能很快會推進並進入 ES2021）是可能的。

utils/index.js ：

const { useForm } = await import(
    isIE11
        ? 'react-hook-form/dist/index.ie11'
        : 'react-hook-form'
);

export { useForm };

另一個文件：

import { useForm } from './utils/index';

兩者都在現代捆綁器中得到了很好的支持，並且由於您正在處理 IE11，如果您使用的是 JavaScript 模塊而不是require ，那么您必須處理捆綁器。