【umi】 非现代浏览器的兼容

也是在umi 社区看到一个比较有意思的事情,记录下

说到高级语法,不得不看下,目前tc 39更新ECAMSCript到哪里了,于是我翻了下finished-proposals , 好家伙, es2024(es15)出来了,

由于是新出来的API,浏览器支持的版本自然会比新。 一般Chrome和Firefox会比较快更新,但是Safari就比较慢了。

所以我们需要做兼容,通常是用babel转换语法,使用[polyfill]来兼容新的API,比如corejs

其他现代浏览器支持

一个用babel 支持 es6语法转发的webpack配置

ts 复制代码
const path = require("path");

module.exports = {
  entry: ["./src/index.js"],
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage",
                  corejs: 3,
                },
              ],
            ],
          },
        },
      },
    ],
  },
};

在umi中,不会用babel对node_modules 进行转换, 如果已经某些特定产物的是es6的产物的话,那么可以通过extraBabelIncludes来编译npm包或目录

arduino 复制代码
// .umirc.ts
 export default {
  extraBabelIncludes: ['monaco-editor'],
  }

对应的输出的webpack配置

json 复制代码
    {
        "test": {},
        "include": [
          [
            "/node_modules/.pnpm/registry.npmjs.org+monaco-editor@0.44.0/node_modules/monaco-editor",
            null
          ]
        ],
        "use": [
          {
            "loader": "/node_modules/.pnpm/registry.npmjs.org+@umijs+bundler-webpack@4.0.89_typescript@5.3.2_webpack@5.89.0/node_modules/@umijs/bundler-webpack/compiled/babel-loader/index.js",
            "options": {
              "sourceType": "unambiguous",
              "babelrc": false,
              "configFile": false,
              "cacheDirectory": false,
              "browserslistConfigFile": false,
              "targets": { "chrome": 80 },
              "presets": [
                [
                  "/node_modules/.pnpm/registry.npmjs.org+@umijs+babel-preset-umi@4.0.89/node_modules/@umijs/babel-preset-umi/dist/index.js",
                  {
                    "presetEnv": {},
                    "presetReact": { "runtime": "automatic" },
                    "presetTypeScript": {},
                    "pluginTransformRuntime": {},
                    "pluginLockCoreJS": {},
                    "pluginDynamicImportNode": false,
                    "pluginAutoCSSModules": true
                  }
                ]
          }
        ],
        "resolve": { "fullySpecified": false }
      },

umi对应的源码位置

之前运行 umi build,非常慢,如果添加多个extraBabelIncludes那就死翘翘了

umi4压缩js,默认使用的是esbuild ,据说会将es5->es6 ,但是我没真的试过,所以面对低版本的浏览器,即使配置targets也没用,必须要需要一起改压缩器, 听说 umi5(用rust写) 会去掉esbuild

umi4给出jsMinifiter(webpack)有多种压缩方式, esbuild是默认值

jsMinifier (webpack)

  • 类型:string,可选值 esbuild, terser, swc, uglifyJs, none
  • 默认值:esbuild

配置构建时压缩 JavaScript 的工具;none表示不压缩。

示例:

css 复制代码
{
  jsMinifier: 'esbuild'
}

jsminifieroptions

  • 类型:object
  • 默认值:{}

jsMinifier 的配置项;默认情况下压缩代码会移除代码中的注释,可以通过对应的 jsMinifier 选项来保留注释。

示例:

js 复制代码
{
  jsMinifier: 'esbuild',
  jsMinifierOptions: {
    minifyWhitespace: true,
    minifyIdentifiers: true,
    minifySyntax: true,
  }
}

配置项需要和所使用的工具对应,具体参考对应文档:

设置tragets

targets

  • 类型:object
  • 默认值:{ chrome: 80 }

配置需要兼容的浏览器最低版本。Umi 会根据这个自定引入 polyfill、配置 autoprefixer 和做语法转换等。

示例,

js 复制代码
// 兼容 ie11
targets: {
  ie: 11,
}

好奇这个自定引入 polyfill、配置 autoprefixer 是怎么做的,预计源代码

生成polyfill.ts

注意:从Babel 7.4.0开始,@babel/polyfill已被弃用,建议直接包含所需的core-js版本和regenerator-runtime/runtime,具体配置可以参考Babel官方文档。

IE支持

leagcy

1、 开启 legacy 参数

css 复制代码
legacy: {}

开启这个参数,无疑会增加构建时间,因为他会对node_modules进行转化, 一般不这么做

2、legacy mode

这种方式你要知道哪些包只提供es6的包

dart 复制代码
// .umirc.ts

export default {
  legacy: {
    nodeModulesTransform: false
  },
  extraBabelIncludes: [
    'some-es6-pkg',
    /@scope//
  ]
}

3、 提高兼容的鲁棒性

arduino 复制代码
// .umirc.ts

export default {
  headScripts: [
    'http://polyfill.alicdn.com/v3/polyfill.min.js' // or https://polyfill.io/v3/polyfill.min.js
  ],
  legacy: {}
}
  • 人工core-js

利用 core-js 系工具,如通过 core-js-builder 构建自己需要的 polyfill 产物,再以 前置 script 脚本 形式引入项目。

源码位置legacy

相关推荐
南囝coding5 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒9 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码28 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front10 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀10 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端