IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> babel入门 -> 正文阅读

[JavaScript知识库]babel入门

目录

前端工程化之前

前端工程化之前,我们编写代码 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
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-23 10:38:28  更:2021-07-23 10:42:51 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/25 16:18:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计