无星的前端之旅（十五）——babel初探

背景

其实很早我就知道，babel会帮助我们做一件事，就是把高版本的ES语法，转换为低版本的ES语法，以确保在低版本浏览器上能正确运行。

但是一直我都不知道怎么去操纵它，只知道需要一堆配置，配合webpack可以做这件事（甚至我一度认为必须使用webpack才能做这件事）。

集成(基本就是抄文档)

其实如果用百度搜索，集成的东西有各种es版本的依赖，配置文件有js，rc，json文件，乱七八糟什么都有。

其实这是历史原因。但现在已经2021年了，咱们就直接按官网说的来。

1.下载依赖包

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

当然，我个人认为，如果不需要兼容IE的话，应该不需要下载polyfill了

2.添加依赖文件

在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5",
      }
    ]
  ]
}

• 上述浏览器列表仅用于示例。根据你所需要支持的浏览器进行调整。

如果@babel/core的版本低于7.8.0，就应该使用babel.config.js了，配置看官网

3.可以直接进行编译了

比如，将src下的文件全部进行转换到lib文件夹

npx babel src --out-dir lib

换句话说，如果你是对一些库做一些简单的二次封装给内部用，可能只需要babel就能满足你的需求了，并不需要配置webpack。

不想集成，就一两个文件，只想快点拿到转换后的代码临时解决问题

babel的在线工具值得一用

配合webpack

当然配合webpack也能用

除了上面添加的这些

babel-loader

npm i babel-loader -D

webpack.config.js中添加对应解析规则

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

当然如果需要更多的优化性配置，可以查看babel-loader的文档