Skip to content

Instantly share code, notes, and snippets.

@xuxucode
Last active November 11, 2024 16:56
Show Gist options
  • Save xuxucode/c917fd9d260fc71b54fac9b14c11f4f0 to your computer and use it in GitHub Desktop.
Save xuxucode/c917fd9d260fc71b54fac9b14c11f4f0 to your computer and use it in GitHub Desktop.
微信小程序导入缺失的 `core-js` 模块

微信小程序已经内置了部分 core-js polyfill,但不全面。参考:

需要手动打包缺失的模块,并导入项目。

第一步: 以打包 URLURLSearchParams 为例,运行此脚本,最后生成文件 corejs-url.js (139 KB)

参考文档:https://github.com/zloirock/core-js/tree/master/packages/core-js-builder

import builder from 'core-js-builder'

await builder({
  // 所有需要的模块('core-js/actual/url' 包含 URL 和 URLSearchParams:https://github.com/zloirock/core-js#url-and-urlsearchparams)
  modules: ['core-js/actual/url'],
  summary: {
    console: { size: true, modules: true },
    comment: { size: true, modules: true },
  },
  format: 'bundle',
  // 打包后的目标文件名
  filename: './corejs-url.js',
})

第二步:把 corejs-url.js 复制到小程序项目里,比如:

├── app.json
├── app.ts
├── lib
│   └── corejs-url.js
├── pages
└── utils
    └── util.ts

第三步:导入 corejs-url.js

// 在 app.ts 文件
import './lib/corejs-url.js'

备注

  • 小程序开发工具(我的版本是 1.06.2307260 darwin)已经实现 globalThis.URLglobalThis.SearchParamscorejs-url仅在真机上有效
@xuxucode
Copy link
Author

corejs-url.js示例:

/**
 * core-js 3.32.1
 * © 2014-2023 Denis Pushkarev (zloirock.ru)
 * license: https://github.com/zloirock/core-js/blob/v3.32.1/LICENSE
 * source: https://github.com/zloirock/core-js
 *//*
 * size: 139.40KB w/o comments
 *//*
 * modules:
 * web.url
 * web.url.can-parse
 * web.url.to-json
 * web.url-search-params
 * web.url-search-params.delete
 * web.url-search-params.has
 * web.url-search-params.size
 */
!function (undefined) { 'use strict'; /******/ (function(modules) { // webpackBootstrap
  // ... 省略 
}

@xuxucode
Copy link
Author

xuxucode commented Aug 23, 2023

https://polyfill.io/v3/url-builder 也可以打包,通过命令行访问生成的链接 https://polyfill.io/v3/polyfill.js?features=URL, 然后保存到文件中。

curl 'https://polyfill.io/v3/polyfill.js?features=URL' > mypolyfill.js

@xuxucode
Copy link
Author

@JasonJunMa 我试过但还是无法直接访问。开发工具里的全局 URL 似乎不是从 globlaThis 上访问的,我尝试重新定义 globalThis.URL,但 URL 始终是 undefined

@JasonJunMa
Copy link

JasonJunMa commented Aug 26, 2023

@xuxucode

可以写一个vite的plugin解决

import process from 'node:process'
import type { Plugin } from 'vite'

export default function vitePluginAxiosPlugin(): Plugin{
  return {
    name: 'vite-plugin-axios-uni-plugin',
    transform(code, id): {
       if(process.env.UNI_PLATFORM?.include('mp')){
          if(id.includes('{你的包含new URL的package路径}')){
            return {
                code: code.replaceAll('new URL','new globalThis.URL'),         
            }
          }
          if(id.includes('{你的包含new URLSearchParams的package路径}')){
            return {
                code: code.replaceAll('new URLSearchParams','new globalThis.URLSearchParams'),         
            }
          }
       }
    }
  }
}

@xuxucode
Copy link
Author

👍👍👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment