ESM & import() & dynamic import All In One

ESM & import() & dynamic import All In One

ESM default export

1. static import / 模块静态导入

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

2. dynamic import / 模块动态导入

import()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

dynamic import

https://caniuse.com/es6-module-dynamic-import

https://tc39.es/ecma262/#sec-import-calls

import()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

https://v8.dev/features/dynamic-import

https://javascript.info/modules-dynamic-imports

https://nextjs.org/docs/advanced-features/dynamic-import

https://medium.com/@vincent.bocquet/dynamic-import-in-javascript-a-simple-guide-a808cff86458

https://flaviocopes.com/javascript-dynamic-import/

https://www.w3docs.com/learn-javascript/dynamic-imports.html

demos

import { default as User, printUser } from "./user.js"

const user = new User("Eric", "X")

printUser(user)

import("./user.js").then(({ default: User, printUser }) => {
  console.log(module)
})

https://youtu.be/ddVm53j80vc?t=164

https://www.youtube.com/watch?v=5s5fVghc4S8

Promise.all & dynamic import modules

// Promise 加载一组 promise 数组
Promise.all(
  Array.from({ length: 10 }).map(
    (_, index) => import(`/modules/module-${index}.js`),
  ),
).then((modules) => modules.forEach((module) => module.load()));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

// Promise 加载一组 promise 数组
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

const promise1 = Promise.resolve(3);
// const promise2 = 42;
const promise2 = Promise.reject(`xxx`);
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
}).catch(err => {
  console.error(err)
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

The Promise.all() static method takes an iterable of promises as input and returns a single Promise.

Promise.all() 静态方法接受一个 Promise 的可迭代对象作为输入，并返回一个 Promise。

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://github.com/web-full-stack/how-to-use-cjs-module-as-esm-module-in-node.js/issues/2#issuecomment-1483849855

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---