博客

babel入门

  • Post author:
  • Post category:其他




目录

文章目录



前端工程化之前

前端工程化之前,我们编写代码 html js css . 因为浏览器只能读懂这几个代码

因为单独的html js css 代码的版本管理维护成本过高. 程序员间的工作交接太慢了

情景一:

现有一个发布发布上线的项目,编写代码为10万行.

接下来续修更新

你作为这个项目的负责人 怎么办呢??

情景二:

公司有一个内测项目,目录结构简单只有一个html 文件中代码数量为 10万行

接下来有一个需要, 让你变更某一个样式,作为程序原的你感受如何呢?

情景三:

现有一个发布发布上线的项目,编写代码为10万行.

html css js 文件才分比较合理,但是变量名字重复太多.还有 a b c d

你接手这个项目,告诉我你的内容什么感觉?

现在的代码:

1: 编写代码按照规范走 规范地址: https://github.com/lin-123/javascript

2: 创建文件 一个 html .js .scss .less .stylus .ts .vue .ejs …

3: 文件种类多了以后, 优势: 可以模块化开发,每个文件中的代码长得都可好看了,文件数目变多了,文件之间的命名管理统一了

4: 众多文件中,有一个入口文件 main.js 那么 html 加载的 是 main.js , 通过这种方式让其他文件都运行

5: 所有的文件 直接 或者 间接的 方式在 main.js 中运行,从而 在页面中运行

6: bug 页面报错了,不能识别你编写的代码


如何让浏览器可以读懂编写的代码?



浏览器能读懂的代码有那些?


html es5以下js css


如果有一个工具,把我编写的代码. 翻译为浏览器可以读懂的代码.然后运行翻译后的代码


工具是什么? 工具怎么翻译呀???



Babel



为什么有Babel

因为高版本js es6以上版本代码浏览器不识别. 需要将代码变为 es6以下的代码



1.认识 Babel


官网：



在线编译：



中文网：

Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码


解释编译结果

  • Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
  • 但是ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块

  • 使用



使用babel 准备工作

 1.什么是 Node.js 和 npm
    Node.js 是个平台或者工具，对应浏览器
    后端的 JavaScript = ECMAScript + IO + File + ...等服务器端的操作

    npm：node 包管理工具

    npm install

2.安装 Node.js
    node -v
    npm -v

3.初始化项目

    npm init -> package.json

4.安装 Babel 需要的包

    npm install --save-dev @babel/core @babel/cli
    npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5

    npm install
5: 运行 npx babel --version

介绍 @babel-cli 在当前文件下 安装

babel

命令


局部的命令工具:

npx 命令 xxx

,全局省略npx


为社么可以运行命令

因为在系统环境变量，或者用户环境变量 PATH 中配置 命令工具的文件路径+



使用 babel 编译es6代码


  1.执行编译的命令
     在 package.json 文件中添加执行 babel 的命令
        babel src -d dist
        babel src --out-dir dist
     
     src 是被编译的文件名
     dist 编译后输出的文件名
     -d 参数  作用配置输出文件名
     --out-dir 是 -d全称


     运行：
      npm run build

      2.Babel 的配置文件
     .babelrc

     npm install @babel/preset-env@7.11.0 --save-dev

     创建配置文件 .babelrc，并配置

     {
       "presets": ["@babel/preset-env"]
     }

     // 在这个文件中编写 使用插件
     // @babel/preset-env 作用，完成语法的编译转化

3：将编译后的代码，加载到html中测试


总结：将来遇到是 js 语法编译问题；就找 babel



用babel中哪一个工具解决什么问题



babel 工具作用详解

babel本身不具有任何转换功能， 如果没有plugin,那么经过babel的代码和输入的是相同的


babel插件分为两种：

  • 语法插件：在解析的过程中，能使babel能够解析更多的语法
  • 转译插件: 在转换的过程中将代码输出。比如将箭头函数转译成正常的函数

其中preset就是babel常用的转译插件



@babel/cli

终端cli工具。



@babel/preset-env

preset是一套规范， 里面包含了几十个转译插件。这是一组插件的集合


preset可以分为下面几种：

  • 1.按官方内容: env, react, flow, minify;
  • 2.stage-x：stage-0 至 stage-3代表了es标准支持的不同阶段。0阶段是最初级的阶段，可以理解为仅仅才开始讨论标准， 换句话说就是基本没有什么浏览器支持es新标准。3表示成熟阶段，意味着主流浏览器的新版本都支持大部分新标准，基础的es新标准特性不需要降级编译为es5，浏览器即可原生支持。


presents详细链接地址：https://www.cnblogs.com/moqiutao/p/12980258.html



@babel/core

babel编译器。被拆分三个模块：@babel/parser、@babel/traverse、@babel/generator。

  • @babel/parser: 接受源码，进行词法分析、语法分析，生成AST。
  • @babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。
  • @babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。


@babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。



体验AST



@babel/plugin-*

babel插件机制、方便扩展、集成。



其他工具

babel-loader：使用Babel转换JavaScript依赖关系的Webpack加载器, 简单来讲就是webpack和babel中间层，允许webpack在遇到js文件时用bable来解析

@babel相当于一种官方标记，和以前大家随便起名形成区别

@babel/preset-env：即babel-preset-env，根据您要支持的浏览器，决定使用哪些transformations / plugins 和 polyfills，例如为旧浏览器提供现代浏览器的新特性。

@babel/preset-react：即 babel-preset-react，针对所有React插件的Babel预设，例如将JSX转换为函数.


babel-polyfill

Babel默认只转换新的JavaScript语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-polyfill，为当前环境提供一个垫片。


babel-runtime

为了解决：

Babel转译后的代码要实现源代码同样的功能需要借助一些帮助函数，而这些帮助函数可能会重复出现在一些模块里，导致编译后的代码体积变大。

所以提供了：单独的包babel-runtime供编译

模块复用

工具函数。

在没有使用babel-runtime之前，库和工具包一般不会直接引入 polyfill。否则像Promise这样的全局对象会污染全局命名空间，这就要求库的使用者自己提供 polyfill。这些 polyfill一般在库和工具的使用说明中会提到，比如很多库都会有要求提供 es5的polyfill。

在使用babel-runtime后，库和工具只要在 package.json中增加依赖babel-runtime，交给babel-runtime去引入 polyfill 就行了



babel 一些插以及用法

使用前请去官网查看 

babel-plugin-dynamic-import-node                   //支持import('comXXX').then()写法
babel-plugin-dynamic-import-webpack             //支持import('comXXX').then()写法
babel-plugin-import                                          //支持对antd, antd-mobile, lodash, material-ui等库进行按需加载
babel-plugin-syntax-dynamic-import                //支持import('comXXX').then()写法
babel-plugin-transform-class-properties          //支持类内直接写属性和静态属性
babel-plugin-transform-decorators-legacy       //支持装饰器
babel-plugin-transform-runtime                       //转换为ES5需要辅助函数，将所有的辅助函数集中到一个模块中，避免所有js文件中有重复的辅助函数生命


babel presets 和 plugins的区别
Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。

这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。

但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。

这个时候，可以采用Babel Preset。

可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。



配置babel生成代码

  • babel-polyfill
  • babel-runtime

bug: 例如 Array.from 并非在每个JavaScript环境中都存在，因此在编译之后它仍然无法使用：

解决：babel-polyfill 

1: 安装
  npm install --save babel-polyfill

2：然后只需将 polyfill 包含在任何需要它的文件的顶部：

 import "babel-polyfill";

bug:解决重复生成的代码过长问题，以及使用 “helper” 方法来保持生成的代码干净

由于这些 “helper” 方法会变得很长，而且它们被添加到每个文件的顶部，因此您可以将它们移动到 require 的单个“运行时”中。 

1 安装
 npm install --save-dev babel-plugin-transform-runtime
 npm install --save babel-runtime

2 使用 .babelrc

  {
    "plugins": [
      "transform-runtime",
      "transform-es2015-classes"
    ]
  }

3 运行 babel 
  测试代码 请使用 class 类



配置babe（进阶）



手动指定插件

Babel 预设只是预配置插件的集合，如果您想做不同的事情，可以手动指定插件。这几乎与预设完全相同。 

1:首先安装一个插件 
  npm install --save-dev @babel/plugin-transform-runtime

2:配置babel
{
    "plugins": [ 
      "@babel/plugin-transform-runtime",    ]
  }

作用：就是更加精准的运行哪一个 transforms


插件选项

每个插件都不不同的配置参数 options,根据自己的项目配置，更高性能的代码 

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}


基于环境定制 Babel####
{
    "presets": ["@babel/presents-env"],
    "plugins": [],
    "env": {
      "development": { // 开发环境
        "plugins": [...]
      },
      "production": {  // 生产环境
        "plugins": [...]
      }
    }
  }


构建自己的 Preset

手动指定插件？插件选项？基于环境的设置？对于所有项目，所有这些配置似乎都需要重复很多次

因此，我们鼓励社区创建自己的预设。这也可是你们公司的预设 

{
    "presets": ["@babel/presents-env"],
    "plugins": [
        "@babel/plugin-transform-runtime",
    ],
  }



babel 与其他工具

  • eslint
  • webpack
  • vue
  • react


版权声明：本文为qq_58849615原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。