webpack4.x下babel的安装、配置及使用详解


Posted in Javascript onMarch 07, 2019

前言

目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具。那么在webpack中如何使用babel呢?这是本篇文章要探讨的问题。

写这篇文章的目的还在于最新webpack版本的一些操作方式已经变化、babel也在不断更新,以往的一些资料或者教程已不适合。笔者对webpack最新版4.1.1下使用babel进行了探索,现将结果总结为本文,以下经测试通过可行,读者可参考设置。

文章用例

为更加清楚的进行阐述,本文使用一个案例,如下:

1、项目根目录为webpack-test,当然这个名字可以随意;

2、在项目根目录下,有一个index.js文件,代码如下:

webpack4.x下babel的安装、配置及使用详解 

3、index.js所引入的a.js文件采用了ES6语法的箭头函数,代码如下:

webpack4.x下babel的安装、配置及使用详解 

4、最终打包成dist目录下的main.js文件,同时dist目录下有一个index.html文件引入main.js的脚本,index.html文件内容如下:

webpack4.x下babel的安装、配置及使用详解

一、安装babel-loader、babel-core、babel-preset-env

这三个文件都是必需的,但彼此的作用各不相同。

首先,babel-loader作为webpack的loader的一种,作用同其他loader一样,实现对特定文件类型的处理。webpack官方文档中指出了loader的作用,即:

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解
JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack的打包能力,对它们进行处理。

虽然webpack本身就能够处理.js文件,但无法对ES2015+的语法进行转换,babel-loader的作用正是实现对使用了ES2015+语法的.js文件进行处理。

要使用babel,首先要安装babel-loader,命令行中定位到项目根目录输入以下指令进行安装:

npm install -D babel-loader

笔者这里安装完成后显示版本是babel-loader@7.1.4。

第二,babel-core的作用在于提供一系列api。这便是说,当webpack使用babel-loader处理文件时,babel-loader实际上调用了babel-core的api,因此也必须安装babel-core:

npm install -D babel-core

笔者安装完成显示版本为babel-core@6.26.0。

第三,babel-preset-env的作用是告诉babel使用哪种转码规则进行文件处理。事实上,babel有几种规则都可以实现对ES6语法的转码,如babel-preset-es2015、babel-preset-latest、babel-preset-env,不过官方现已建议采用babel-preset-env,本文也将采用babel-preset-env,你可以通过官网了解几种规则的区别。同样在命令行中定位到项目根目录,输入以下指令进行安装:

npm install -D babel-preset-env

笔者安装的版本是babel-preset-env@1.6.1。

二、配置babel 规则

上面仅仅是安装了三个包,如果要使babel起作用,便需要配置babel规则。

第一种方式是通过package.json。在package.json文件中增加一个“babel"属性,该属性是一个JSON对象,作用是设置项目中的babel转码规则和使用到的babel插件,其基本格式如下:

"babel":{
 "presets": [],
 "plugins": []
}

”presets”属性字段设定转码规则,”plugins”属性设置使用到的插件。在本项目中只需将”babel”属性 的”presets”:设置为[“env”]即可,如下所示:

"babel":{
 "presets": ["env"]
}

上面的设置告诉npm本项目将使用babel,并且使用bable-preset-env规则进行转码,即实现对ES2015+语法进行转码。

除此之外,还有第二种方式,即通过.babelrc文件。在项目根目录下新建.babelrc文件,里面只需输入第一种方式中”babel”属性的值即可:

{
 "presets": ["env"]
}

作用和第一种方式相同。

三、建立并配置webpack.config.js文件

仅有上面仍然不能起作用,虽然上面已经配置好babel的规则,但webpack仍然不知道何时使用该规则,这便需要使用webpack.config.js文件。

这个文件的作用是对webpack打包的参数进行配置。我的第一篇关于webpack4.x的文章《webpack4.x开发环境配置》中已经提到,webpack4.x中webpack.config.js这样的配置文件不是必须的,但事实上,如果想要进行更加个性化的打包配置,仍然要使用该文件。在根目录下新建webpack.config.js文件,在其中输入:

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

}

这就告诉webpack打包时,一旦匹配到.js文件就使用babel-loader进行处理,如前文所述,babel-loader调用babel-core的api使用bable-preset-env的规则进行转码。这里并没有使用entry、output这样的参数,这是webpack4.x有默认的入口和出口,本项目无须改变,因此便不必进行设置。

四、运行查看结果

假使你已经在package.json文件的"scripts"属性下增加了"build"属性,即

"build": "webpack --mode production --progress --display-modules --colors --display-reasons"

现在,在命令行定位到项目根目录,执行

npm run build

这就相当于执行"build"属性对应的脚本。

现在,webpack开始进行打包,当打包完成后,用浏览器打开dist目录下的index.html查看结果,可以发现弹出两次弹窗

第一次是"hello world",第二次是"2,3,4"。

这表明a.js中的arrowTest()函数成功执行,打开main.js查看打包后的代码,也可以发现箭头函数部分的代码已经被转换成ES5的语法,如下:

[1,2,3].map(function(r){return r+1})

这表明整个babel的配置及使用已经成功。

当然,以上只是最基本的配置和使用,如果要应对更加复杂的情况,只需要参照官方文档对相关参数进行修改,这并不是什么难事,完!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 #Javascript
深入理解react 组件类型及使用场景
Mar 07 #Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 #Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 #Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 #Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 #Javascript
You might like
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
javascript中new关键字详解
2015/12/14 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Js apply方法详解
2017/02/16 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
好的自荐信的要求
2013/10/30 职场文书
自我介绍演讲稿
2014/01/15 职场文书
社区活动总结报告
2014/05/05 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书