Skip to main content

ESM

Can I UseChromeSafari
moduleChrome v61+
dynamic-importChrome 63+Safari 11.1+
import-mapsChrome 89+

Can I Use

caution
  • react 没有 esm
    • import React from "https://esm.sh/react@17"
  • electron 不支持 esm #21457
tip
// reexport default
export {default /* …, */} from 'module-name';

// import 为一个 Module
import * as Reaction from '@wener/reaction'
// 模块 reexport
export * from '@wener/reaction'

import 'data:text/javascript,console.log("hello!");';
import _ from 'data:application/json,"world!"' assert {type: 'json'};

import fs from 'node:fs/promises';

// dyanmic import json
const pkgJsonModule = await import('https://cdn.jsdelivr.net/npm/@wener/reaction@latest/package.json', {assert: {type: 'json'}});
// 通过 toStringTag 判断是否为 Module
console.assert(pkgJsonModule[Symbol.toStringTag] === 'Modoule')
cons {default:{version}} = pkgJsonModule
console.log(version)

// CSS Module
import styles from "./styles.css" assert { type: "css" };
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];

<!--
JSPM Generator Import Map
Edit URL: https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9QzAADeRmOTGwA
-->
<script type="importmap">
{
"imports": {
"react": "https://ga.jspm.io/npm:[email protected]/index.js"
}
}
</script>

<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
<script
async
src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"
crossorigin="anonymous"
></script>

import map

tip
  • 目前只支持 web - 不支持 worker
  • 可通过脚本动态构建 element
  • 只能映射为本地
<script type="importmap">
{
"imports": {
"moment": "/node_modules/moment/src/moment.js",
"lodash": "/node_modules/lodash-es/lodash.js"
}
}
</script>
<!-- application/importmap+json -->
<script type="importmap" src="import-map.importmap"></script>
动态构建
<script>
if (HTMLScriptElement.supports && HTMLScriptElement.supports('importmap')) {
console.log('Your browser supports import maps.');
}

const importMap = {
imports: {
moment: '/moment.mjs',
lodash: someFeatureDetection() ? '/lodash.mjs' : '/lodash-legacy-browsers.mjs',
},
};

const im = document.createElement('script');
im.type = 'importmap';
im.textContent = JSON.stringify(importMap);
document.currentScript.after(im);
</script>

<script type="module">
import _ from 'lodash'; // will fetch the right URL for this browser
</script>
importmap 规范
{
"imports": {
// import moment from "moment";
"moment": "/node_modules/moment/src/moment.js",
// 自动映射
// import localeData from "moment/locale/zh-cn.js";
"moment/": "/node_modules/moment/src/",
"lodash": "/node_modules/lodash-es/lodash.js",
// import fp from "lodash/fp.js";
"lodash/": "/node_modules/lodash-es/",
// 无扩展名
// import fp from "lodash/fp"
"lodash/fp": "/node_modules/lodash-es/fp.js",

// remapping - 对 <script> 不生效
"https://www.unpkg.com/vue/dist/vue.runtime.esm.js": "/node_modules/vue/dist/vue.runtime.esm.js",
// 前缀 remmaping
"https://www.unpkg.com/vue/": "/node_modules/vue/",
"/app/helpers.mjs": "/app/helpers/index.mjs",

// 常见处理 hash 场景
"/js/app.mjs": "/js/app-8e0d62a03.mjs"
},
// 限定上下文,修改依赖
"scopes": {
"/scope2/": {
"a": "/a-2.mjs"
},
"/scope2/scope3/": {
"b": "/b-3.mjs"
}
}
}

import json

  • NodeJS v17.1+ 2021-11-09
import info from `./package.json` assert { type: `json` };

const { default: info } = await import("./package.json", {
assert: {
type: "json",
},
});

exports

NodeJS

Internal

import.meta.resolve

FAQ

Directory import is not supported resolving ES modules

// 不可以
const M = import('./modules/core');
// 可以
const M = import('./modules/core/index.js');

__dirname is not defined in ES module scope

  • 定义最好用 var 避免重复定义,有些 bundle 会加这两个定义
import * as url from 'url';
var __filename = url.fileURLToPath(import.meta.url);
var __dirname = url.fileURLToPath(new URL('.', import.meta.url));
import { fileURLToPath } from 'node:url';
import path from 'node:path';

var __filename = fileURLToPath(import.meta.url);
var __dirname = path.dirname(fileURLToPath(import.meta.url));
// 新的 NodeJS 也支持 URL,可以直接 resolve
const foo = new URL('foo.js', import.meta.url);

Failed to resolve module references must start with

Failed to resolve module specifier "app". Relative references must start with either "/", "./", or "../".

An import map is added after module script load was triggered.

process.env.NODE_ENV

  • import.meta.env.MODE
  • __DEV__ -> import.meta.env.DEV
  • import.meta.env.PROD
declare global {
interface ImportMetaEnv extends Readonly<Record<string, any>> {
readonly MODE: string;
readonly BASE_URL: string;
readonly DEV: boolean;
readonly PROD: boolean;
readonly SSR: boolean;
}

interface ImportMeta {
readonly env: ImportMetaEnv;
}
}

Module not found: Default condition should be last one

  • default 要放在最后
{
"exports": {
".": {
"types": "./src/index.ts",
"development": "./dist/esm/wener-reaction.development.js",
"import": "./lib/esm/index.js",
"require": "./lib/cjs/index.js",
"default": "./lib/esm/index.js"
}
}
}

NextJS Cannot find module without suffix

  1. 配置使用 bundle 后的文件 - 无法 tree-shake
  2. 使用 mjs 后缀 - 会忽略 type:module
  1. 避免 default exports

require() of ES Module not supported

  • type=module

__esModule

require

import { createRequire } from 'module';
const require = createRequire(import.meta.url);