[BABEL] Note: The code generator has deoptimised the styling of......as it exceeds the max of 500KB

这篇具有很好参考价值的文章主要介绍了[BABEL] Note: The code generator has deoptimised the styling of......as it exceeds the max of 500KB。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在打包项目的时候遇到了这种类型的错误,为了更好的解决这种问题,了解一下babel相关的知识,以及如何解决这类问题的方法。

解决办法

在项目的根目录下创建.banelrc文件,内容为

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

针对问题的扩展

1.什么是babel

它是一个可以将javascript语言的语法从最新的语法转换成向后兼容的语法,使项目可以在当前和旧版本的浏览器或其他环境中运行。

2.babel配置

在babel执行编译的过程中,会从项目的根目录下的.babelrc文件中读取配置,该文件主要是对预设(presets) 和 插件(plugins) 进行配置。

2.1 plugins

该属性是告诉babel要使用那些插件,这些插件可以控制如何转换代码。

Babel默认只转换新的javascript语法,而不转换新的API,比如 Set, Maps, Proxy, Promise 等全局对象。以及一些在全局对象上的方法(比如 Object.assign)都不会转码。这时就需要选择合适的插件进行转码。

babel提供了三种转换的插件:

1.babel-polyfill
当运行环境中并没有实现的一些方法,它都会通过向全局对象和内置对象的prototype上添加方法来实现的。这样会造成全局空间污染。

2.babel-runtime
它不会污染全局对象和内置对象的原型,比如说我们需要Promise,我们只需要import Promise from 'babel-runtime/core-js/promise’即可,但它需要每个文件都要家import,会造成代码冗余

3.babel-plugin-transform-runtime
它是针对babel-runtime进行了公共方法的抽离,减少代码冗余。

因此我们通常会选择第三种插件进行配置

{
  'plugins': [
    [
      'transform-runtime', 
      {
        'helpers': ture,	
        // 默认为true,是否开启内联的babel helpers(即babel或者环境本来存在的某些对象方法函数)如:extends,etc这样的
在调用模块名字时将被替换名字。
        'polyfill': true,
        // 默认为true,是否把内置的东西(Promise, Set, Map)等转换成非全局污染的。
        'regenerator': true,
        // 默认为true,是否开启generator函数转换成使用regenerator runtime来避免污染全局域。
        'moduleName': 'babel-runtime'
        // 默认为 babel-runtime,当调用辅助 设置模块(module)名字/路径.
      }
    ]
  ]
}

2.2 presets

presets属性告诉Babel要转换的源码使用了哪些新的语法特性,presets是一组Plugins的集合。

babel-preset-env 会根据目标环境选择不支持的新特性来转译。

{
  'presets': [
    ['env', {
      'target': {
        'browsers': ['last 2 versions', 'safari >= 7'],
        // 支持每个浏览器最后两个版本和safari大于等于7版本所需的polyfill代码转换
        'browsers': '> 5%',
        // 支持市场份额超过5%的浏览器
        'chrome': 56,
        // 支持指定浏览器版本
        "node": "current"
        // 如果通过Babel编译Node.js代码的话,可以设置支持当前运行版本的nodejs。
      },
      'modules': false
      // 启用将ES6模块语法转换为另一种模块类型。将该设置为false就不会转换模块。默认为 'commonjs'.但是现在webpack都帮我做了这件事了,所以我们不需要babel来做,因此需要在babel配置项中设置modules为false.
      "include": ["transform-es2015-arrow-functions", "es6.map"]
      // 包含一些插件
      "exclude": ["transform-regenerator", "es6.set"]
      // 排除一些插件
    }]
  ]
}

2.3 compact

参数类型:Boolean | “auto” 默认值:“auto” 该配置选项引导 babel 是否开启紧凑模式,紧凑模式会省略所有可选的换行符和空格. 当配置选项是”auto“的时候,babel 会根据文件的字符数判断,当字符长度 code.length > 50,000 时 会开启紧凑模式文章来源地址https://www.toymoban.com/news/detail-782907.html

到了这里,关于[BABEL] Note: The code generator has deoptimised the styling of......as it exceeds the max of 500KB的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包