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 相关文章推荐
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
js 通用订单代码
Dec 23 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
React组件refs的使用详解
Feb 09 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
JavaScript中的类型检查
Feb 03 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php开发工具有哪五款
2015/11/09 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python制作exe文件简单流程
2019/01/24 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python如何输出整数
2020/06/07 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
教育专业自荐书范文
2013/12/17 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
外贸专业求职信
2014/03/09 职场文书
创意婚礼策划方案
2014/05/18 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
python神经网络Xception模型
2022/05/06 Python