ES6之Babel的各种坑总结【转载】

更新日期: 2018-04-09阅读量: 2124标签: babel

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。


坑一:本地安装和全局安装 

全局安装只需:

$ npm install –global babel-cli 
这时候我们可以使用 Babel 命令编译文件:

$ babel index.js --out-file compiled.js
#或
$ babel index.js -o compiled.js

编译目录:

$ babel src -out-dir lib
#或
babel src -d lib

但是,官方推荐本地安装,是这么说的:

While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project.

There are two primary reasons for this.

Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time.

It means you do not have an implicit dependency on the environment you are working in. Making your project far more portable and easier to setup. 
大致的意思就是:可移植性较好并且没有依赖。

本地安装,记在项目的根目录下:

$ npm install --save-dev babel-cli

但是在本地就不能用 babel 命令了,我们可以在 package.json 文件中添加点东西:

{
    "script": {
        "build": "babel src -d lib"
    }
}

然后,运行 npm run build 即可把 src 目录编译输出到 lib


坑二: 编译插件 

上述编译其实并没有进行,而是原样输出。这是因为我们没有安装相应的插件,官方提示我们需要安装 babel-reset-es2015 插件:

$ npm install --save-dev babel-preset-es2015

然后,在根目录创建一个名为 .babelrc 的文件,里面配置如下内容:

{
    "presets": [
        "es2015"
    ]
}

同理,可以设置 react 的编译插件:

$ npm install --save-dev babel-preset-react

.babelrc 文件里即:

{
   "presets": [
       "es2015",
       "react"
   ] 
}


坑三: babel-polyfill插件 

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。Babel 默认不转码的 API 非常多,详细清单可以查看 definitions.js 文件

为了完整使用 ES6 的 API ,我们只能安装这个插件:

$ npm install -save-dev babel-polyfill

然后,在需要使用的文件的顶部引入

import "babel-polyfill"

node.js 中:

require('babel-polyfill');

webpack.config.js 中:

module.exports = {
    entry: ['babel-polyfill', './app/js']
}


作者: Chansi_lEE 
链接:https://www.imooc.com/article/11157 
来源:慕课网


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/606

深入类和继承内部原理+Babel和 TypeScript 之间转换

在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。

babel polyfill 的一些理解

为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。简单来讲,babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。

Babel 还是 Node 开发的“必需品”吗?

现在做 Node 开发还需要“麻烦”的 Babel 吗?毋庸置疑,Babel 曾经对构建和开发 Node.js 应用程序有过很大的影响,但随着 Node.js 的原生功能不断强大,Babel 或许也不再是 Node 开发的必需品。

如何将ES6转换成ES5?

ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码

Babel中的stage-0,stage-1,stage-2以及stage-3的作用(转)

大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码

不容错过的 Babel7 知识

对 Babel 的配置项的作用不那么了解,是否会影响日常开发呢?老实说,大多情况下没有什么影响。不过呢,还是想更进一步了解下,于是最近认真阅读了 Babel 的文档,外加不断编译验证

babel的初步了解

由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法。babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。

Babel 7 转码的正确姿势

Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法,升级到 Babel 7 的时候又折腾了一把,所以决定把自己的心得和理解记录下来,希望能帮助到有需要的童鞋。

初学 Babel 工作原理

Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel

babel-preset-env:一个帮你配置babel的preset

babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!