乐趣区

babel的作用及使用

babel 的作用

babel 是一个 node 命令行工具,它的作用是对我们源代码进行转码(把 es6=>es5)

babel 的使用步骤:

  • 安装相关的包:@babel/core babel 的核心功能 @babel/cli 提供 babel 命令行的能力 - D 安装
  • 转码配置 package.json 中的 script babel 目标文件 / 文件夹 - o 或者 -d(o 用于转码文件,d 用于转码文件夹) 编译之后的文件 / 文件夹
  • babel 官网 (https://www.babeljs.cn/) 查看各个模块对应的插件
  • 配置 plugins: 针对不同的 es6 语法提供的插件(1. 命令行的使用方式 2. 配置文件的使用方式)-D
  • 例:package.json 中的 script 标签配置 (转文件夹下的 es6 源码):
  • babel ./src -d ./build –plugins @babel/plugin-transform-block-scoping
  • 命令行 package.json 中的 script 配置文件 .babelrc 文件 {}
  • 预设 presets: @babel/preset-env 包含了插件,.babelrc 文件中配置 -D
  • 使用 @babel/polyfill 用于解决 es6 语法中一些新增方法(非新语法问题)的转义。直接 require() 引入 -S
  • 使用 @babel/runtime 该包是用来解决转码的时候生成的 helper 函数(辅助函数)引用混乱的问题。-S
  • 配合 @babel/plugin-transform-runtime 插件使用使用 @babel/plugin-transform-runtime 该包能够保证我们正常的引入 @babel/runtime 这个包。-D .babelrc 文件中插件配置
退出移动版