Bable的使用

Sanchi 发布于2019-08-23 15:40 / 1781人阅读

摘要：二配置文件有两种并行的配置文件的方式，可以一起使用，也可以多带带使用。属性告诉要转换的源码使用了哪些新的语法特性，是一组的集合。转码规则转码规则不同阶段语法提案的转码规则共有个阶段，选装一个

一、bable简介

babel是一个工具链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。babel目前已经支持了最新版本的javascript语法，对于目前尚未被浏览器支持的语法，可以通过babel插件支持。

二、配置文件

Babel有两种并行的配置文件的方式，可以一起使用，也可以多带带使用。

项目范围的配置

文件相关配置

.babelrc（和.babelrc.js）文件

package.json中"babel"关键字的部分

1. 项目范围的配置

根目录创建 babel.config.js 文件。babel.config.js 的官方文档在这里 babel

2. 文件相关配置 1）.babelrc（和.babelrc.js）文件

在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。在.babelrc配置文件中，主要是对预设(presets) 和插件(plugins) 进行配置。.babelrc配置文件一般为如下：

{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2",
     "react"
  ]
}

plugins该属性是告诉babel要使用那些插件，这些插件可以控制如何转换代码。
presets属性告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合。官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102410.html

babel7 重新理解

摘要：主要功能点语法转换垫片兼容处理，通过方式在目标环境中添加缺失的特性源码转换其他使用理念主要通过插件的形式达到转换代码的目的。就是解决这个问题的。测试环境 node 10.14.1Babel 7.4.3 Babel 是什么？ Babel 是一个工具链，主要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码，以便能够运行在当前和旧版本的浏览器或其...

avwu 2019-08-23 17:55 评论0 收藏0
webpack打包js

摘要：打包的两种方式命令行指定的配置文件使用命令行打包一创建两个文件创建，导出一个加法的函数，使用这个函数。二使用命令打包在当前目录下使用这里入口是输出文件是，这样就会看到文件中多出一个文件。创建一个文件运行，引入运行，控制台会打印。 webpack打包的两种方式 webpack entry output （命令行） webpack -config webpack.conf.js (指定w...

Rango 2019-08-22 15:16 评论0 收藏0
webpack - babel配置

摘要：配置是一个编译器，是前端开发中的一个利器。其中，插件是为了告诉只编译批准的内容，相当于及最新版本。安装用法将下面内容添加到文件中更多细节参考插件。 webpack - babel配置 babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。通过构建和babel，可以使用最新js语法进行...

yunhao 2019-08-22 16:00 评论0 收藏0
记一次 webpack 打包体积优化

摘要：手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得，所以现在必须进行优化。用于生产环境的打包，设置其为后，这些库会提供最小体积的文件。这种情况打包后的体积要更小一些。最后打包结果的体积开销主要就是以上几项。手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。打包结果分析执行命令 webpack ...

tomlingtm 2019-08-26 11:47 评论0 收藏0
2017年 JavaScript 框架回顾 -- 后端框架

摘要：本文是年框架回顾系列的最后的一篇文章，主要介绍的后端框架情况。葡萄城公司成立于年，是全球领先的集开发工具商业智能解决方案管理系统设计工具于一身的软件和服务提供商。本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。 showImg(https://segmentfault.com/img/bV2TPd?w=735&h=...

xiaoqibTn 2019-08-26 11:31 评论0 收藏0