Babel 概念普及,与深度分析

2019-04-13  本文已影响0人  believedream

Babel 是一个 JavaScript 编译器

@babel/core与babel-core的区别

(从版本 7 开始)都是以 @babel 作为冠名的。这种模块化的设计能够让每种工具都针对特定使用情况进行设计。 下面我们着重看一下 @babel/core 和 @babel/cli

babel 常用包得概念:
@babel/cli
@babel/core
@babel/preset-env
@babel/polyfill
@babel/runtime
@babel/plugin-transform-runtime
@babel/plugin-transform-xxx

@babel/cli 与@babel/node

@babel/cli是babel提供的内建的命令行工具,主要是提供babel这个命令来对js文件进行编译,这里要注意它与另一个命令行工具@babel/node的区别,首先要知道他们二者都是命令行工具,但是官方文档明确对他们定义了他们各自的使用范围:
@babel/cli 是一个适合安装在本地项目里,而不是全局安装

总结: 一个命令而已,需要配合其他东西使用(@babel/core)

@babel/preset-env 将es6语法转换成es6 凡是不包括await 等这些新方法。
我们还需要一个叫@babel/polyfill的包来解决

@babel/runtime
@babel/plugin-transform-runtime
@babel/runtime的作用是提供统一的模块化的helper,那什么是helper,我们举个例子:
我们编译之后的index.js代码里面有不少新增加的函数,如_classCallCheck,_defineProperties,_createClass,这种函数就是helper。那这种helper跟我们的@babel/runtime有什么关系了,我们接着看,比如像这个_createClass就是我们将es6的class关键字转化成传统js时生成的一个函数,那么如果我有很多个js文件中都定义了class类,那么在编译转化时就会产生大量相同的_createClass方法,那这些_createClass这样的helper方法是不是冗余太多,因为它们基本都是一样的,所以我们能不能采用一个统一的方式提供这种helper,也就是利用es或者node的模块化的方式提供helper,将这些helper做成一个模块来引入到代码中,岂不是可以减少这些helper函数的重复书写。

@babel/plugin-transform-runtime它会帮我自动动态require @babel/runtime中的内容

babel7 新增

"useBuiltIns": "usage" //entry usage
按需引入polyfill

上一篇下一篇

猜你喜欢

热点阅读