vue如何使用bable将es6转译为es5

更新时间：2023年07月04日 11:51:37 作者：对的态度带你走向对的路

这篇文章主要介绍了vue如何使用bable将es6转译为es5问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

为什么使用babel

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

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

babel使用

1. 运行以下命令安装所需的包（package）

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本）

并将以下内容复制到此文件中：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

上述浏览器列表仅用于示例。请根据你所需要支持的浏览器进行调整。

参见此处以了解 @babel/preset-env 可接受哪些参数。

如果你使用的是 Babel 的旧版本，则文件名为 babel.config.js。

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];
module.exports = { presets };

3.插件和预设（preset）

代码转换功能以插件的形式出现，插件是小型的 JavaScript 程序，用于指导 Babel 如何对代码进行转换。

你甚至可以编写自己的插件将你所需要的任何代码转换功能应用到你的代码上。

例如将 ES2015+ 语法转换为 ES5 语法，我们可以使用诸如 @babel/plugin-transform-arrow-functions 之类的官方插件：

npm install --save-dev @babel/plugin-transform-arrow-functions

现在，我们代码中的所有箭头函数（arrow functions）都将被转换为 ES5 兼容的函数表达式了：

const fn = () => 1;
// converted to
var fn = function fn() {
  return 1;
};

这是个好的开始！但是我们的代码中仍然残留了其他 ES2015+ 的特性，我们希望对它们也进行转换。我们不需要一个接一个地添加所有需要的插件，我们可以使用一个 “preset” （即一组预先设定的插件）。

就像插件一样，你也可以根据自己所需要的插件组合创建一个自己的 preset 并将其分享出去。

J对于当前的用例而言，我们可以使用一个名称为 env 的 preset。

npm install --save-dev @babel/preset-env

如果不进行任何配置，上述 preset 所包含的插件将支持所有最新的 JavaScript （ES2015、ES2016 等）特性。但是 preset 也是支持参数的。

我们来看看另一种传递参数的方法：配置文件，而不是通过终端控制台同时传递 cli 和 preset 的参数。

配置

根据你的需要，可以通过几种不同的方式来使用配置文件。另外，请务必阅读我们关于如何配置 Babel 的深入指南以了解更多信息。

其实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
  ]

.babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

实践

1.在main.js中引入 ,一定要在最顶部引入

import "core-js/stable";
import "regenerator-runtime/runtime";

2.babel.config.js 配置

module.exports = {
  presets: [
    // '@vue/cli-plugin-babel/preset',
    [
      // '@babel/preset-env',
      '@vue/app',
      {
        modules: 'commonjs',
        useBuiltIns: 'entry',//entry usage
        corejs: "3",
        debug:true
      }
    ]
  ],
  sourceType: 'unambiguous'
  // "plugins": [
  //   [
  //     "@babel/plugin-transform-runtime",
  //     {
  //       "corejs": 3 // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
  //     }
  //   ]
  // ]
};

ie中遇到的问题

1.因为webstorm格式化会在最后一个属性后面加一个，导致ie不兼容。

用eslint 格式化配置将最后一个逗号去掉。

在.eslintrc.js中加入

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'prettier/prettier': [
      process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      {
        singleQuote: true,
        semi: false,
      },
    ],
    "comma-dangle": [1, "never"] // 这里就是格式化最后一个逗号
  },
};

2.因为项目中用到了sm4等加密方式，babel并没有将依赖转义为es5。

所以我们还要再加一个配置，让babel转译我们的依赖。

在vue.config.js中加入配置项

transpileDependencies: [
    'sm-crypto',
    'bpmn-js',
    'bpmn-js-properties-panel',
    'diagram-js',
    'bpmn-moddle',
    '@bpmn-io',
    '@bpmn-io/element-templates-validator'
  ],

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue视频播放暂停代码
今天小编就为大家分享一篇vue视频播放暂停代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue拦截器实现统一token,并兼容IE9验证功能
这篇文章主要介绍了vue拦截器实现统一token,并兼容IE9验证功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2018-04-04
Vue全局变量的定义及使用方法
这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
vue-cli3.0配置及使用注意事项详解
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些？本文通过实战案例给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-09-09
Vue CompositionAPI中watch和watchEffect的区别详解
这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别，文中的示例代码简洁易懂，希望对大家学习Vue有一定的帮助
2023-06-06
Vant Weapp组件踩坑:picker的初始赋值解决
这篇文章主要介绍了Vant Weapp组件踩坑:picker的初始赋值解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
详解vuex之store拆分即多模块状态管理(modules)篇
这篇文章主要介绍了详解vuex之store拆分即多模块状态管理(modules)篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue3.0之Router的使用你了解吗
这篇文章主要为大家详细介绍了vue3.0之Router的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue-cli单页面预渲染seo-prerender-spa-plugin操作
这篇文章主要介绍了vue-cli单页面预渲染seo-prerender-spa-plugin操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue 将多个过滤器封装到一个文件中的代码详解
这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2020-09-09