Modern.js Module
指南
API
插件
指南
API
插件
简体中文

Polyfill 插件

TIP

通常情况下，我们不需要为 npm 包注入 polyfill，这一步应该在 Web 应用的框架侧完成，但是在某些场景，为了让我们的库能够直接运行在低版本浏览器里，我们需要注入 polyfill。

请注意，此插件并不会转化你的代码语法，只会为你的代码中使用到的不支持的功能注入 polyfill，把它们作为普通函数导入而不是污染全局。你需要安装 core-js-pure 依赖

快速开始

安装

npm
yarn
pnpm
bun
npm add @modern-js/plugin-module-polyfill -D

注册插件

在 Modern.js Module 中，你可以按照如下方式注册插件：

import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';

export default defineConfig({
  plugins: [moduleTools(), modulePluginPolyfill()],
});

你也可以通过 hooks 配置注册，例如你同时具有多份构建配置，并只需要在 bundle 构建时注入 polyfill：

import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { getPolyfillHook } from '@modern-js/plugin-module-polyfill';

const polyfillHook = getPolyfillHook();

export default defineConfig({
  plugins: [moduleTools()],
  buildConfig: [
    {
      buildType: 'bundle',
      hooks: [polyfillHook],
    },
    {
      buildType: 'bundleless',
    },
  ],
});

配置

  • 类型：
type options = {
  targets?: Record<string, string> | string;
};

targets

参考 Babel target.

下面是一个例子：

import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginPolyfill({
      targets: '> 0.25%, not dead',
    }),
  ],
});