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

2018年10月10日 14:52:14 yedegesong 阅读数 5350
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”: {

}
}