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 相关文章推荐
JS操作图片(增,删,改) 例子
Apr 17 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
vue观察模式浅析
Sep 25 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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
destoon之一键登录设置
2014/06/21 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Django数据库操作之save与update的使用
2020/04/01 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
组织关系转移介绍信
2014/01/16 职场文书
创业计划书如何编写
2014/02/06 职场文书
房屋公证委托书
2014/04/03 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python