美文网首页前端工程师的自我修养
Babel 7之后的一些相关包

Babel 7之后的一些相关包

作者: fancy_coder | 来源:发表于2018-12-19 03:30 被阅读101次

    Summary

    对于Babel V7以后,一些包的理解

    @babel/core

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

    @babel/polyfill

    Babel包含一个polyfill,它包含一个自定义的再生器运行时和core-js。
    babel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化BOM里面不兼容的API
    比如 Promise,Set,Symbol,Array.from,async 等等的一些API
    这时候就需要 polyfill 来转转化这些API 进行转译 *是通过向全局对象和内置对象的prototype上添加方法实现的,会造成全局变量污染,结合@babel/plugin-transform-runtime 可避免全局污染

    @babel/register

    使用Babel的方法之一是通过require钩子。 require钩子将自己绑定到node的require并自动编译文件。

    @babel/preset-env

    对es2015, es2016. es2017的支持

    1. 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
    2. ES2016
      exponentiation-operator
    3. ES2017
      async-to-generator

    Plugins

    • @babel/plugin-transform-runtime 所有帮助程序都将引用该模块,@babel/runtime以避免编译输出中的重复。运行时将编译到您的构建中。它会将重复的已require 模块方式引入。
    • @babel/runtime-corejs2 编译自带ES5语法
    • @babel/plugin-transform-object-assign 编译Object.assign
    • @babel/plugin-proposal-class-properties 解析类的属性
    • @babel/plugin-proposal-decorators 装饰器
    "plugins": [
        ["@babel/plugin-transform-runtime",{"corejs": 2}],
        "@babel/plugin-transform-object-assign",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-class-properties"
    ]
    
    • stage
      // 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"

    相关文章

      网友评论

        本文标题:Babel 7之后的一些相关包

        本文链接:https://www.haomeiwen.com/subject/uvqdkqtx.html