babel 和 babel-loader

babel 概述

Babel 是一个 JavaScript 编译器，它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。

案例分析

//demo  a.js
[1,2,3].map(item => item+20)

官方给的是@babel/cli，其内部包含调用了@babel/node

@babel/core 提供的是基础 api

我们采用工具 @babel/cli 将包含es6语法的 a.js 文件转成 es5 代码的b.js。

• 首先 npm init 创建 package.json 文件

• 然后下载@babel/cli @babel/core npm install -D @babel/cli @babel/core

• npx babel a.js -o b.js

执行后的 b.js 中的代码除了有一些格式化之外和原本代码并没有什么变化，主要是没有任何的预设（presets）和插件（plugins）转换。

所有我们在项目根目录下建一个 .babelrc 文件：

{
    
    
	"presets":["@flowio/babel-preset-flowio"],
	"plugins":[]
}
//ps 单独下载 npm i -D @flowio/babel-preset-flowio

目前 babel 版本现在更新到了7 ，旧的 babel-preset-es2015 已经淘汰。

执行 npx babel a.js -o b.js，转换后的代码如下：

//b.js
"use strict";
[1, 2, 3].map(function (item) {
    
    
  return item + 10;
});

babel-loader概述

在 webpack 中babel-loader的配置项：

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

babel-loader 的作用是相对于一个交通指挥， 只是在webpack打包时遇到js文件，交给babel处理，至于怎么处理，跟webpack就没有关系了，跟 babel 的配置有关。