CICD校验
除了在git进行校验，我们也可以在cicd流程进行校验，一旦不通过，就不通过
MR
{ "scripts": { "lint": "eslint . --ext .js" } }
stage('Linting') { steps { sh 'npm run lint' } }
三、使用polyfill解决兼容性问题
在某些情况下，即使经过兼容性检查，仍然可能存在一些浏览器不支持的新特性。这时候，我们可以使用polyfill来为这些浏览器提供缺失的功能。
手动polyfill
安装第三方库：
在项目中安装需要的polyfill库，比如core-js或者polyfill.io。
npm install core-js --save
写兼容性代码：
在需要兼容性支持的地方，引入相应的polyfill库，并编写对应的代码。
// main.js import 'core-js/features/promise'; const button = document.getElementById('my-button'); button.addEventListener('click', () => { // 使用新特性Promise new Promise((resolve) => { setTimeout(() => { resolve('Button clicked!'); }, 1000); }).then((message) => { console.log(message); }); });
自动polyfill
使用Babel来自动根据目标浏览器版本转换代码，并使用babel-runtime来抽离公共模块。
安装相关库：
npm install @babel/preset-env @babel/plugin-transform-runtime --save-dev
配置Babel：
在项目的.babelrc文件中配置Babel：
{ "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }] ], "plugins": ["@babel/plugin-transform-runtime"] }
按需引入polyfill：
根据实际使用的新特性，Babel会自动根据目标浏览器版本引入必要的polyfill。
// main.js const button = document.getElementById('my-button'); button.addEventListener('click', () => { // 使用新特性Promise new Promise((resolve) => { setTimeout(() => { resolve('Button clicked!'); }, 1000); }).then((message) => { console.log(message); }); });
动态polyfill服务：
可以使用polyfill.io等服务来动态为不支持的浏览器提供polyfill，以减少页面加载的数据量。
<!DOCTYPE html> <html> <head> <title>Polyfill Example</title> </head> <body> <button id="my-button">Click Me</button> <!-- 加载polyfill.io服务 --> <script src="https://polyfill.io/v3/polyfill.min.js"></script> <script src="main.js"></script> </body> </html>
再谈Babel
Babel 是一个 JavaScript 编译器,为什么这么说，因为babel不会处理
Web API啊，我当时也认为babel自动帮我们做polyfill，结果忽略了Web API,babel只会处理ECMAScript标准中的特性
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块，例如core-js）
- 源码转换（codemods）
遇到的问题
在chrome61环境中报错ResizeObserver is not a function。
经确认ResizeObserver特性最低支持chrome64，于是将babel编译的目标版本设置为chrome 61，但改报错仍未解决，经过一番查找，原因如下：
Babel only polyfills ECMAScript features.
What is ECMAScript? It is the core of the JavaScript that you can use in the browser. Browsers implements ECMAScript, and on top of it there are lots of expansions (Dom objects, service workers, Ajax, ...). ResizeObserver is one of those expansions.
How can you know if a feature is part of ECMAScript or not?
I'd suggest searching for that function on MDN, and look at the Specifications section (ArrayBuffer example).
于是手动引入resize-observer-pollyfill问题就解决了
