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 的配置有关。

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值