非vue项目

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

bable将es6转译为es5

vue项目

通过vue-cli搭建的项目，则其实vue 已经引入了babel， 检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码

• package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "Chrome 40.0", // 兼容低版本谷歌
    "ie >= 9"  // 兼容ie 9
  ]

解释；
browserslist 是一个配置文件或配置项，用于指定项目或应用程序要支持的目标浏览器和浏览器版本。以确保代码在特定浏览器上运行良好。
示例中，browserslist 中的每个条目的含义如下：

1. "> 1%":

   • 这个条目表示您要支持全球浏览器市场份额超过 1% 的浏览器。这包括现代浏览器，但排除了非常不常见的老旧浏览器。

2. "last 2 versions":

   • 这个条目表示您要支持每个浏览器的最近两个主要版本。这有助于确保您的代码在最新的浏览器版本上运行良好。

3. "not dead":

   • 这个条目排除了不再维护的浏览器。通常情况下，不再维护的浏览器可能会存在许多安全漏洞，因此建议不支持它们。

4. "Chrome 40.0":

   • 这个条目表示您要支持 Chrome 浏览器的版本 40.0 及以上。这是一个特定版本的要求，用于确保在早期版本的 Chrome 中也能正常运行。

5. "ie >= 9":

   • 这个条目表示您要支持 Internet Explorer 9 及更高版本。这是一个明确的要求，以确保您的代码在较旧版本的 IE 中运行良好。

这些设置有助于确定您的项目的目标浏览器范围，以便您可以选择在构建和转换过程中应用适当的 polyfills 和转换，以确保您的代码在这些浏览器上运行良好。这对于确保跨浏览器兼容性非常重要，特别是在开发 Web 应用程序时。

---

以上是经过我验证的。这里测试用的是49版的老旧浏览器。特别老了。新项目在此浏览器上无法跑通，白屏，因为我的新项目有大量的es6新语法。旧版浏览器不支持。记录一下解决过程。主要是es6中的对象属性语法？。（作为es6特性代表去检测。果然是这样的，写个demo测试出来的）

---

现在使用的js语法，基本是ES5的规范 ，15年出的ES6的规范增加了很多其他语法，要看浏览器的支持情况，如果浏览器不支持那么就会报错

ES6 块级作用域 关键字let, 常量const,对象字面量的属性赋值简写,赋值解构,函数参数 - 默认值、参数打包、 数组展开（Default 、Rest 、Spread）,
箭头函数 Arrow functions,字符串模板 Template strings,Iterators（迭代器）+ for…of,生成器 （Generators）,class,Modules,Map + Set + WeakMap + WeakSet,Promises是处理异步操作的对象,Symbol是一种基本类型通过调用symbol函数产生,Symbol是一种基本类型。Symbol 通过调用symbol函数产生 等

一、桌面端浏览器对ES2015的支持情况
Chrome：51 版起便可以支持 97% 的 ES6 新特性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性。
IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

二、移动端浏览器对ES2015的支持情况
iOS：10.0 版起便可以支持 99% 的 ES6 新特性。
Android：基本不支持 ES6 新特性（5.1 仅支持 25%）

三、服务器对ES2015的支持情况
Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

附：如何使用ES6的新特性，又能保证浏览器的兼容？
针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel，jsx，traceur，es6-shim 等

---

当我们打包时提示
All browser targets in the browserslist configuration have supported ES module.
Therefore we don’t build two separate bundles for differential loading.

---

这个提示的意思其实很简单，翻译成大白话就是：

“你的浏览器兼容配置（browserslist）里的所有目标浏览器，都已经支持 ES Module。我们就不再做双份构建（differential loading）了。”

---

🧠 背景知识：什么是 differential loading？

在早期构建过程中，框架（比如 Angular、Vite、Vue CLI 等）为了兼容旧浏览器，通常会：

• 构建两个版本的 JS：

  • ES2015+（现代浏览器用）
  • ES5（旧浏览器用）

• 然后通过 <script type="module"> 和 <script nomodule> 来“差异加载”。

---

🧩 为什么现在不做了？

因为你项目中的 browserslist 配置只包含了现代浏览器，例如：

"browserslist": [
  "last 2 Chrome versions",
  "last 2 Firefox versions",
  "last 2 Safari versions"
]

这些浏览器都已经支持 ES Module，很久了，所以：

⚡ 没必要再构建 ES5 的备份包了，构建工具就只输出一个现代 bundle，提升构建速度、减小体积。

---

✅ 所以这个提示其实是好事！

它表明：

• 你的 browserslist 很现代；
• 工具链够聪明，不浪费资源构建无用代码。

---

✅ 你要做什么吗？

**什么都不用做！**除非你有兼容旧浏览器（如 IE11）的需求，那你可以修改 browserslist：

"browserslist": [
  "defaults"
]

这样就会触发 differential loading 构建。

---