前言

在打包項(xiàng)目的時(shí)候遇到了這種類型的錯(cuò)誤，為了更好的解決這種問(wèn)題，了解一下babel相關(guān)的知識(shí)，以及如何解決這類問(wèn)題的方法。

解決辦法

在項(xiàng)目的根目錄下創(chuàng)建.banelrc文件，內(nèi)容為

{
   "compact": false,
   "presets": ["env", "stage-0"],
   "plugins": ["transform-runtime"]
}

針對(duì)問(wèn)題的擴(kuò)展

1.什么是babel

它是一個(gè)可以將javascript語(yǔ)言的語(yǔ)法從最新的語(yǔ)法轉(zhuǎn)換成向后兼容的語(yǔ)法，使項(xiàng)目可以在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中運(yùn)行。

2.babel配置

在babel執(zhí)行編譯的過(guò)程中，會(huì)從項(xiàng)目的根目錄下的.babelrc文件中讀取配置，該文件主要是對(duì)預(yù)設(shè)(presets) 和 插件(plugins) 進(jìn)行配置。

2.1 plugins

該屬性是告訴babel要使用那些插件，這些插件可以控制如何轉(zhuǎn)換代碼。

Babel默認(rèn)只轉(zhuǎn)換新的javascript語(yǔ)法，而不轉(zhuǎn)換新的API，比如 Set, Maps, Proxy, Promise 等全局對(duì)象。以及一些在全局對(duì)象上的方法(比如 Object.assign)都不會(huì)轉(zhuǎn)碼。這時(shí)就需要選擇合適的插件進(jìn)行轉(zhuǎn)碼。

babel提供了三種轉(zhuǎn)換的插件：

1.babel-polyfill
當(dāng)運(yùn)行環(huán)境中并沒(méi)有實(shí)現(xiàn)的一些方法，它都會(huì)通過(guò)向全局對(duì)象和內(nèi)置對(duì)象的prototype上添加方法來(lái)實(shí)現(xiàn)的。這樣會(huì)造成全局空間污染。

2.babel-runtime
它不會(huì)污染全局對(duì)象和內(nèi)置對(duì)象的原型，比如說(shuō)我們需要Promise，我們只需要import Promise from 'babel-runtime/core-js/promise’即可，但它需要每個(gè)文件都要家import，會(huì)造成代碼冗余

3.babel-plugin-transform-runtime
它是針對(duì)babel-runtime進(jìn)行了公共方法的抽離，減少代碼冗余。

因此我們通常會(huì)選擇第三種插件進(jìn)行配置

{
  'plugins': [
    [
      'transform-runtime', 
      {
        'helpers': ture,	
        // 默認(rèn)為true，是否開(kāi)啟內(nèi)聯(lián)的babel helpers(即babel或者環(huán)境本來(lái)存在的某些對(duì)象方法函數(shù))如：extends，etc這樣的
在調(diào)用模塊名字時(shí)將被替換名字。
        'polyfill': true,
        // 默認(rèn)為true，是否把內(nèi)置的東西(Promise, Set, Map)等轉(zhuǎn)換成非全局污染的。
        'regenerator': true,
        // 默認(rèn)為true，是否開(kāi)啟generator函數(shù)轉(zhuǎn)換成使用regenerator runtime來(lái)避免污染全局域。
        'moduleName': 'babel-runtime'
        // 默認(rèn)為 babel-runtime，當(dāng)調(diào)用輔助 設(shè)置模塊（module）名字/路徑.
      }
    ]
  ]
}

2.2 presets

presets屬性告訴Babel要轉(zhuǎn)換的源碼使用了哪些新的語(yǔ)法特性，presets是一組Plugins的集合。

babel-preset-env 會(huì)根據(jù)目標(biāo)環(huán)境選擇不支持的新特性來(lái)轉(zhuǎn)譯。

{
  'presets': [
    ['env', {
      'target': {
        'browsers': ['last 2 versions', 'safari >= 7'],
        // 支持每個(gè)瀏覽器最后兩個(gè)版本和safari大于等于7版本所需的polyfill代碼轉(zhuǎn)換
        'browsers': '> 5%',
        // 支持市場(chǎng)份額超過(guò)5%的瀏覽器
        'chrome': 56,
        // 支持指定瀏覽器版本
        "node": "current"
        // 如果通過(guò)Babel編譯Node.js代碼的話，可以設(shè)置支持當(dāng)前運(yùn)行版本的nodejs。
      },
      'modules': false
      // 啟用將ES6模塊語(yǔ)法轉(zhuǎn)換為另一種模塊類型。將該設(shè)置為false就不會(huì)轉(zhuǎn)換模塊。默認(rèn)為 'commonjs'.但是現(xiàn)在webpack都幫我做了這件事了，所以我們不需要babel來(lái)做，因此需要在babel配置項(xiàng)中設(shè)置modules為false.
      "include": ["transform-es2015-arrow-functions", "es6.map"]
      // 包含一些插件
      "exclude": ["transform-regenerator", "es6.set"]
      // 排除一些插件
    }]
  ]
}

2.3 compact

參數(shù)類型：Boolean | “auto” 默認(rèn)值：“auto” 該配置選項(xiàng)引導(dǎo) babel 是否開(kāi)啟緊湊模式，緊湊模式會(huì)省略所有可選的換行符和空格. 當(dāng)配置選項(xiàng)是”auto“的時(shí)候，babel 會(huì)根據(jù)文件的字符數(shù)判斷，當(dāng)字符長(zhǎng)度 code.length > 50,000 時(shí) 會(huì)開(kāi)啟緊湊模式文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-782907.html

到了這里，關(guān)于[BABEL] Note: The code generator has deoptimised the styling of......as it exceeds the max of 500KB的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！