脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue用bable将es6转译为es5

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 UI框架的主题切换功能实现

    Vue UI框架的主题切换功能实现

    在如今，很多网页已经可以手动切换明亮模式和黑暗模式，网页的主题切换已经成为了一个常用的需求，因此，本文将从常见框架的处理方式总结一些相关的操作，对vue ui框架主题切换功能感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • Monaco-editor 的 JSON Schema 配置及使用介绍

    Monaco-editor 的 JSON Schema 配置及使用介绍

    这篇文章主要为大家介绍了Monaco-editor 的 JSON Schema 配置及使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • VSCode中书写Vue无代码提示该如何解决

    VSCode中书写Vue无代码提示该如何解决

    vscode开发vue非常好用,因为有很多的插件,可以补全语法,或者高亮便于检查错误,但我最近发现我的vscode却没有了代码提示,这篇文章主要给大家介绍了关于VSCode中书写Vue无代码提示该如何解决的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue动态设置路由权限的主要思路

    vue动态设置路由权限的主要思路

    这篇文章主要给大家介绍了关于vue动态设置路由权限的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue 中常见的时间格式转换

    vue 中常见的时间格式转换

    这篇文章主要介绍了vue 中常见的时间格式转换,需要的朋友可以参考下
    2022-05-05
  • Vue Router 实现动态路由和常见问题及解决方法

    Vue Router 实现动态路由和常见问题及解决方法

    动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。这篇文章主要介绍了Vue Router 实现动态路由和常见问题解决方案,需要的朋友可以参考下
    2020-03-03
  • Vue el-table组件如何实现将日期格式化

    Vue el-table组件如何实现将日期格式化

    这篇文章主要介绍了Vue el-table组件如何实现将日期格式化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • vue3如何使用ref获取元素

    vue3如何使用ref获取元素

    这篇文章主要介绍了vue3如何使用ref获取元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • 解决el-date-picker 宽度溢出浏览器的问题

    解决el-date-picker 宽度溢出浏览器的问题

    这篇文章主要介绍了解决如何el-date-picker 宽度溢出浏览器问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • vue中通过使用$attrs实现组件之间的数据传递功能

    vue中通过使用$attrs实现组件之间的数据传递功能

    组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。这篇文章主要介绍了vue中通过使用$attrs实现组件之间的数据传递,需要的朋友可以参考下
    2019-09-09

最新评论