关于babel 的一些包理解7.X版本

Babel 组成部分

---

@babel/core  *必装

babel 核心包，编译器。提供转换的API

@babel/cli 

babel的命令行工具，经过命令行对js代码进行转译

具体命令使用：https://babeljs.io/docs/en/babel-cli 

启动babel/cli 编译器  /node_modules/.bin/babel 非全局安装

将src 目录下的全部js 文件编译成而且输出到 lib 目录下 

 ./node_modules/.bin/babel src --out-dir lib

要在每次更改文件时编译文件，请使用--watch或-w选项：

 ./node_modules/.bin/babel --watch --out-file script-compiled.js

@babel/polyfill

注意babel7 中 @babel/polyfill  是 @babel/runtime-corejs2的别名

详细地址：https://babeljs.io/docs/en/v7-migration

babel 7 中说明删除提案polyfill @babel/polyfill 结合 @babel/runtime-corejs2 + @babel/plugin-transform-runtime 插件使用

babel 编译时只转换语法，几乎能够编译全部时新的 JavaScript 语法，但并不会转化BOM里面不兼容的API
好比 Promise,Set,Symbol,Array.from,async 等等的一些API
这时候就须要 polyfill 来转转化这些API 进行转译 *是经过向全局对象和内置对象的prototype上添加方法实现的，会形成全局变量污染，结合@babel/plugin-transform-runtime 可避免全局污染，使用方式查看下文

//.babelrc
{
    "plugins": [
        ["@babel/plugin-transform-runtime",{"corejs": 2}]
    ]
  }

@babel/register

使用Babel的方法之一是经过require钩子。require钩子将本身绑定到节点require并自动编译文件。

在node中 使用@babel/register 让其在require 加载文件的时候babel 自动动态编译

require("@babel/register");
require("./test.js")

Presets

---

如 env,stage-0,stage-1等等
其中的 env 表示 babel会加载 es6 相关的编译模块，而后 stage-0 表示的是什么呢？
stage 系列集合了一些对 es7 的草案支持的插件，因为是草案，因此做为插件的形式提供。

如下下官方给咱们提供的自带的presets:

babel 没法编译的ES5新语法 详情请移致：https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js

@babel/preset-env *必装

包含以下标准：

@babel/preset-es2015，@babel/preset-es2016和@babel/preset-es2017

ES3
member-expression-literals
property-literals
reserved-words
ES5
property-mutators
ES2015
arrow-functions
block-scoped-functions
block-scoping
classes
computed-properties
destructuring
duplicate-keys
for-of
function-name
instanceof
literals
new-target
object-super
parameters
shorthand-properties
spread
sticky-regex
template-literals
typeof-symbol
unicode-regex
ES2016
exponentiation-operator
ES2017
async-to-generator

@babel/preset-stage-0

@babel/preset-stage-1

@babel/preset-stage-2 //如开启预设器 需安装下列所示插件

@babel/preset-stage-3

这几个阶段中对应的方法级： Babel 7官方中 推荐：截至Babel v7，全部阶段预设均已弃用

{
  "plugins": [
    // Stage 0
    "@babel/plugin-proposal-function-bind",

    // Stage 1
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
    "@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }], //解析装饰器
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
  ]
}

 

plugins

---

转换以插件的形式出现，插件是小型JavaScript程序，它指示Babel如何对代码进行转换。 

 @babel/plugin-transform-runtime  *必装

全部帮助程序都将引用该模块，@babel/runtime以免编译输出中的重复。运行时将编译到您的构建中。它会将重复的已require 模块方式引入。

/***
    未使用 @babel/plugin-transform-runtime
**/
"use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

_extends({}, {
  name: "abc"
});

/***
    已使用 @babel/plugin-transform-runtime
**/

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

(0, _extends2.default)({}, {
  name: "abc"
});

@babel/runtime-corejs2 编译自带ES5语法

如Object.assign 等 根老版本库@babel/polyfill 相似。通常配合@babel/plugin-transform-runtime 使用.详细配置使用见 .babelrc 文件

 

# install the runtime as a dependency
npm install @babel/runtime-corejs2
# install the plugin as a devDependency
npm install @babel/plugin-transform-runtime --save-dev

 

@babel/plugin-transform-object-assign

用来编译 Object.assign

@babel/plugin-proposal-class-properties  解析类的属性

class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
      return this.instanceProperty;
    };

    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function() {
      return Bork.staticProperty;
    };
  }

  let myBork = new Bork;

  //Property initializers are not on the prototype.
  console.log(myBork.__proto__.boundFunction); // > undefined

  //Bound functions are bound to the class instance.
  console.log(myBork.boundFunction.call(undefined)); // > "bork"

  //Static function exists on the class.
  console.log(Bork.staticFunction()); // > "babelIsCool"

@babel/plugin-proposal-decorators 装饰器

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

配置文件.babelrc

---

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-transform-runtime",{"corejs": 2}],
        "@babel/plugin-transform-object-assign",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-class-properties"
    ]
  }

package.json

---

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/runtime-corejs2": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-transform-object-assign": "^7.0.0"
  },
  "dependencies": {
    
  }
}