babel的使用详解

目录

Babel 是什么？

Babel安装

命令行工具和核心库安装

安装和配置预设

编译

配置兼容的浏览器

在构建工具中使用babel

webpack

gulp

---

 

Babel 是什么？

babel可以认为是一个javascript的翻译工具。ECMAScript迄今为止，已经更新很多个版本了。而旧浏览器并不一定支持新版本的ECMAScript的标准。例如ES6的许多语法和API在旧版本的ie中就不支持，因此为了所写代码的兼容性，Babel就可以把新版本的代码翻译成旧浏览器也能识别的语法。

Babel安装

命令行工具和核心库安装

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

 

• @babel/core：babel核心库，提供了编译所需的全部api
• @babel/cli：调用babel核心库api的命令行工具

安装和配置预设

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

安装babel的预设。因为babel本身只是个编译工具，需要结合具体的设置才能实现具体翻案方案，@babel/preset-env就是一个预设库，里面集成babel常用的设置。

在项目根目录下，新建 babel.config.json 文件，配置如下：

{
      "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 2
        }]
    ]
}

usebuiltins:默认为false,配置usebuiltins可以在编译新的API，如promise,async..await等新API。如果不配置的话，是不转换这些API。从而要导致旧版本浏览器不识别。

因此还需要安装两个库：

core-js和regenerator-runtime

npm i core-js@2 regenerator-runtime

编译

方式一：可以使用 @babel/cli 打包

一、单个文件编译
babel 要编译的文件名 -o 编译后的文件名

二、整改目录编译
babel 要编译的目录 -d 编译后结果输出的目录

方式二：

在package.json文件中配置打包命令：

  {
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
      "build": "babel src -d lib"
    },
    "devDependencies": {
      "@babel/cli": "^7.0.0"
    }
  }

在shell执行命令：

npm run build

配置兼容的浏览器

在.browserslistrc文件中配置：

last 3 version 
> 1%
not ie <= 8

或

在package.json文件中配置：

"browserslist": "last 3 version,> 1%,not ie <= 8"

在构建工具中使用babel

webpack

安装构建工具和核心库和预设如上面配置一样。

安装babel-loader

npm install --save-dev babel-loader

配置webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
}

配置完就可以使用webpack打包了

gulp

npm install -D gulp-babel

配置安装上问中babel.config.json配置即可使用

具体细节参考：

官网：https://babeljs.io/

中文网站：https://www.babeljs.cn/docs/