babel基础配置

UsherChen 发布于2019-08-23 14:58 / 1479人阅读

摘要：基础配置如下设置转码规则和插件字段设定转码规则，官方提供以下的规则集，按需安装。结合许多工具需要进行前置转码，如和在项目根目录下，新建一个配置文件，在其中加入字段。在之中，加入相应的脚本部分参考到底该如何配置

babel

标签（空格分隔）： babel

babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

Babel 会在正在被转录的文件的当前目录中查找一个 .babelrc 文件。如果不存在，它会遍历目录树，直到找到一个 .babelrc 文件，或一个 package.json 文件中有 "babel": {}

babel6将babel全家桶拆分成了许多不同的模块(rc是run command的缩写)

依赖

babel-loader：使用es6或加载模块时，对es6代码进行预处理，转为es5语法。
babel-core：允许我们去调用babel的api，可以将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理.
babel-preset-env：推荐preset，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一个完整的ES2015+环境，使得我们能够使用新的内置对象比如 Promise，比如 Array.prototype.includes 和生成器函数（提供给你使用 regenerator 插件）。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。
babel-runtime babel-plugin-transform-runtime：这个插件能自动为项目引入polyfill和helpers

presets

babel5会默认转译ES6和jsx语法，babel6转译的语法都要在perset中配置，preset简单说就是一系列plugin包的使用。

预设就是一系列插件的集合，把之前的参数保存为一个预设，下次就能直接使用。

基础配置如下：（设置转码规则和插件）

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，按需安装。

可以看到提案在进入stage3阶段时就已经在一些环境被实现，在stage2阶段有babel的实现。

# ES2015转码规则
babel-preset-es2015
# react转码规则
babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段）
babel-preset-stage-0
babel-preset-stage-1: draft - 必须包含2个实验性的具体实现，其中一个可以是用转译器实现的，例如Babel。
babel-preset-stage-2: candidate - 至少要有2个符合规范的具体实现。
babel-preset-stage-3

配置：

{
    "presets": [
      "es2015",
      "stage-2"
    ],
    "plugins": []
  }

babel-preset-env

此段内容来自于babel到底该如何配置？

上面这些preset官方现在都已经不推荐了,官方唯一推荐preset：babel-preset-env

这款preset能灵活决定加载哪些插件和polyfill

// cnpm install -D babel-preset -env
{
    "presets": [
        ["env", {
            "targets": { //指定要转译到哪个环境
                //浏览器环境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node环境
                "node": "6.10", //"current"  使用当前版本的node
                
            },
             //是否将ES6的模块化语法转译成其他类型
             //参数："amd" | "umd" | "systemjs" | "commonjs" | false，默认为"commonjs"
            "modules": "commonjs",
            //是否进行debug操作，会在控制台打印出所有插件中的log，已经插件的版本
            "debug": false,
            //强制开启某些模块，默认为[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模块，默认为[]
            "exclude": ["transform-es2015-for-of"],
            //是否自动引入polyfill，开启此选项必须保证已经安装了babel-polyfill
            //参数：Boolean，默认为false.
            "useBuiltIns": false
        }]
    ]
}

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    "syntax-dynamic-import",
    "transform-es2015-modules-commonjs"
  ]
}

plugins

此段内容来自于babel到底该如何配置？

babel中的插件，通过配置不同的插件才能告诉babel，我们的代码中有哪些是需要转译的。

插件官网

{
    "plugins": [
        ["transform-es2015-arrow-functions", { "spec": true }]
    ]
}

transform-runtime,这个插件能自动为项目引入polyfill和helpers

polyfill作用是用已经存在的语法和api实现一些浏览器还没有实现的api，对浏览器的一些缺陷做一些修补。例如Array新增了includes方法，但是低版本的浏览器上没有，就得做兼容处理

transform-runtime这个插件依赖于babel-runtime

babel-runtime由三个部分组成：

core-js
core-js极其强悍，通过ES3实现了大部分的ES5、6、7的polyfill。
regenerator
regenerator来自facebook的一个库，用于实现 generator functions。
helpers
babel的一些工具函数，这个helpers和使用babel-external-helpers生成的helpers是同一个东西

配置transform-runtime

{
    "plugins": [
        ["transform-runtime", {
            "helpers": false, //自动引入helpers
            "polyfill": false, //自动引入polyfill（core-js提供的polyfill）
            "regenerator": true, //自动引入regenerator
        }]
    ]
}

比较transform-runtime与babel-polyfill引入垫片的差异：

使用runtime是按需引入，需要用到哪些polyfill，runtime就自动帮你引入哪些，不需要再手动一个个的去配置plugins，只是引入的polyfill不是全局性的，有些局限性。而且runtime引入的polyfill不会改写一些实例方法，比如Object和Array原型链上的方法，像前面提到的Array.protype.includes。
babel-polyfill就能解决runtime的那些问题，它的垫片是全局的，而且全能，基本上ES6中要用到的polyfill在babel-polyfill中都有，它提供了一个完整的ES6+的环境。babel官方建议只要不在意babel-polyfill的体积，最好进行全局引入，因为这是最稳妥的方式。
一般的建议是开发一些框架或者库的时候使用不会污染全局作用域的babel-runtime，而开发web应用的时候可以全局引入babel-polyfill避免一些不必要的错误，而且大型web应用中全局引入babel-polyfill可能还会减少你打包后的文件体积（相比起各个模块引入重复的polyfill来说）。

结合ESLint

许多工具需要Babel进行前置转码，如ESLint和Mocha

在项目根目录下，新建一个配置文件.eslint，在其中加入parser字段。

{
  "parser": "babel-eslint",
  "rules": {
    ...
  }
}

在package.json之中，加入相应的scripts脚本

"scripts": {
  "lint": "eslint --ext .js,.vue src",
},

部分参考：
babel到底该如何配置？

GPU云服务器云服务器 Babel 集群服务器配置基础 babel cdn babel7

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

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

es6基础0x024：babel简单使用

摘要：简单的说就是，新语法编译器旧语法。说明所以，对于新特性，我们可以通过使用，也可以通过语法转化来达到兼容。 0x001 polyfill 我们都知道，js总是一直存在着兼容性问题，虽然其他语言也存在着兼容性问题，比如c++、java，但那种兼容性是新特性在旧版本上的不兼容，js则存在着各种奇形怪哉的不兼容。这其中有着非常复杂的历史和时代的原因，并不加以累述。而解决兼容性问题的方法在以前只...

wangbinke 2019-08-23 13:41 评论0 收藏0
进击webpack4 （基础篇：配置一）

摘要：进入入口起点后，会找出有哪些模块和库是入口起点直接和间接依赖的。用于对模块的源代码进行转换。指定生产还是开发入口文件打包后的文件名这里需指定一个绝对路径我们需要的模块去解析路径包含一系列的规则是一个具有属性的对象。前文：进击webpack 4 （基础篇一） webpack.config.js基础配置 webpack 有4大概念入口(entry) 输出(output) load...

FleyX 2019-08-23 15:27 评论0 收藏0
webpack 大法好 ---- 基础概念与配置（1）

摘要：不信你命令行里敲个试试敲敲敲当然了想直接运行命令，你需要将添加到系统变量啊。全局安装相同的，运行命令耐心等待安装完成后，你的系统变量里就存在命令了，你可以运行下试试。上诉如果有不懂的，欢迎留言。再一次见面！ Light 还是太太太懒了，距离上一篇没啥营养的文章已经过去好多天。今天为大家介绍介绍 webpack 最基本的概念，以及简单的配置，让你能快速得搭建一个可用的 webpack ...

QLQ 2019-08-20 14:41 评论0 收藏0
零React基础入门Amaze UI Touch！

摘要：全文的目的是达成使用进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具，下一个炒鸡好用的神器。只提供组件，对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环...

王晗 2019-08-21 10:57 评论0 收藏0
零React基础入门Amaze UI Touch！

摘要：全文的目的是达成使用进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具，下一个炒鸡好用的神器。只提供组件，对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环...

OldPanda 2019-08-29 11:03 评论0 收藏0