无星的前端之旅(十五)——babel初探

428 阅读2分钟

背景

其实很早我就知道,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的文档