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

时间: 2018-04-09阅读: 1314标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader

谈@babel/preset-typescript的优越性之前,还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

前端中的编译原理:从零打造一个实用的 Babel 插件

说起编译原理,可能我们脑海中首先浮现的就是 “编译器” 这个词汇。维基百科上对编译器的定义是: 编译器是一种计算机程序,它会将某种编程语言写成的源代码(原始语言)转换成另一种编程语言(目标语言)

如何实现一个 Babel Macros?

可以发现实现一个 Babel macros 的过程与开发 Babel 插件的流程类似,都是对 AST 进行操作。babel-plugin-macro 只是提供一个在“外部”进行 AST 修改的方式,通过这种方式能够灵活的对 Babel 编译时进行拓展

babel polyfill 的一些理解

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

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

babel环境安装与编译

babel:将浏览器不支持的ES6语法转为javascript,初始化package.json文件:描述当前项目信息,包括依赖等,创建配置文件,告诉babel用什么规则来编译文件.babelrc

babel 版本原因运行报错,解决办法

学习 babel 时,遇到的问题,使用旧版本 babel 命名规则安装后运行报错,初步查找到原因是因为 babel 各个preset和plugin新旧不同版本之间存在兼容问题,提示使用 npx babel-upgrade 可以自动升级,但是我升级失败了

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

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

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

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

点击更多...

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