vue如何使用bable將es6轉(zhuǎn)譯為es5

更新時(shí)間：2023年07月04日 11:51:37 作者：對(duì)的態(tài)度帶你走向?qū)Φ穆?

這篇文章主要介紹了vue如何使用bable將es6轉(zhuǎn)譯為es5問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

為什么使用babel

ECMAScript 6(ES6)的發(fā)展速度非常之快，但現(xiàn)代瀏覽器對(duì)ES6新特性支持度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來(lái)實(shí)現(xiàn)。

Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項(xiàng)目中使用ES6的特性。

babel使用

1. 運(yùn)行以下命令安裝所需的包（package）

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

2.在項(xiàng)目的根目錄下創(chuàng)建一個(gè)命名為 babel.config.json 的配置文件（需要 v7.8.0 或更高版本）

并將以下內(nèi)容復(fù)制到此文件中：

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

上述瀏覽器列表僅用于示例。請(qǐng)根據(jù)你所需要支持的瀏覽器進(jìn)行調(diào)整。

參見(jiàn) 此處以了解 @babel/preset-env 可接受哪些參數(shù)。

如果你使用的是 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.插件和預(yù)設(shè)（preset）

代碼轉(zhuǎn)換功能以插件的形式出現(xiàn)，插件是小型的 JavaScript 程序，用于指導(dǎo) Babel 如何對(duì)代碼進(jìn)行轉(zhuǎn)換。

你甚至可以編寫(xiě)自己的插件將你所需要的任何代碼轉(zhuǎn)換功能應(yīng)用到你的代碼上。

例如將 ES2015+ 語(yǔ)法轉(zhuǎn)換為 ES5 語(yǔ)法，我們可以使用諸如 @babel/plugin-transform-arrow-functions 之類的官方插件：

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

現(xiàn)在，我們代碼中的所有箭頭函數(shù)（arrow functions）都將被轉(zhuǎn)換為 ES5 兼容的函數(shù)表達(dá)式了：

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

這是個(gè)好的開(kāi)始！但是我們的代碼中仍然殘留了其他 ES2015+ 的特性，我們希望對(duì)它們也進(jìn)行轉(zhuǎn)換。我們不需要一個(gè)接一個(gè)地添加所有需要的插件，我們可以使用一個(gè) “preset” （即一組預(yù)先設(shè)定的插件）。

就像插件一樣，你也可以根據(jù)自己所需要的插件組合創(chuàng)建一個(gè)自己的 preset 并將其分享出去。

J對(duì)于當(dāng)前的用例而言，我們可以使用一個(gè)名稱為 env 的 preset。

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

如果不進(jìn)行任何配置，上述 preset 所包含的插件將支持所有最新的 JavaScript （ES2015、ES2016 等）特性。但是 preset 也是支持參數(shù)的。

我們來(lái)看看另一種傳遞參數(shù)的方法：配置文件，而不是通過(guò)終端控制臺(tái)同時(shí)傳遞 cli 和 preset 的參數(shù)。

配置

根據(jù)你的需要，可以通過(guò)幾種不同的方式來(lái)使用配置文件。另外，請(qǐng)務(wù)必閱讀我們關(guān)于如何配置 Babel 的深入指南以了解更多信息。

其實(shí)vue 已經(jīng)引入了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']
    }
  }
}

實(shí)踐

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 兩個(gè)版本
  //     }
  //   ]
  // ]
};

ie中遇到的問(wèn)題

1.因?yàn)閣ebstorm格式化會(huì)在最后一個(gè)屬性后面加一個(gè)，導(dǎo)致ie不兼容。

用eslint 格式化配置將最后一個(gè)逗號(hào)去掉。

在.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"] // 這里就是格式化最后一個(gè)逗號(hào)
  },
};

2.因?yàn)轫?xiàng)目中用到了sm4等加密方式，babel并沒(méi)有將依賴轉(zhuǎn)義為es5。

所以我們還要再加一個(gè)配置，讓babel轉(zhuǎn)譯我們的依賴。

在vue.config.js中加入配置項(xiàng)

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