当前位置:首页 > javascript技术文章 > webpack4.x下babel的安装、配置及使用详解

webpack4.x下babel的安装、配置及使用的知识点总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:181

这篇文章主要知识点是关于webpack4.x、babel、安装配置、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

同构JavaScript应用开发
  • 类型:JavaScript大小:10.4 MB格式:PDF作者:杰森·史特林贝尔(Jason Strim
立即下载

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

前言

目前,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的配置及使用已经成功。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

JavaScript按概率随机生成代码整理

PHP中加速、缓存扩展的区别及用法整理

PHP的Yii框架中移除组件所绑定的例子分享

软件自动化测试成功之道:典型工具、脚本开发、测试框架

信息系统项目管理师案例分析指南

展开 +

收起 -

javascript 相关电子书
学习笔记
网友NO.424770

详解react-webpack2-热模块替换[HMR]

本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下: 模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载页面。这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间。 babel 配置 需要先下载 npm install --save-dev react-hot-loader@3.0.0-beta.6 然后在 .babelrc 中配置 { "presets": [ ["es2015", {"modules": false}], // webpack 2 中需要这样配置禁用 "stage-2", "react" ], "plugins": [ "react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR) ]} webpack 配置 入口插入模块热替换 entry: { app: [ 'react-hot-loader/patch', // 开启 React 代码的模块热替换(HMR) 'webpack-dev-server/client?http://localhost:8080', // 为 webpack-dev-server 的环境打包代码 // 然后连接到指定服务器域名与端口,可以换成本机ip 'webpack/hot/only-dev-server', // 为热替换(HMR……

网友NO.238918

Webpack 服务器端代码打包的示例代码

环境变量 之前,我们在项目里会经常使用 process.env.NODE_ENV, 但这个变量对于 webpack打包是有影响的, 在 production 的时候是有优化的. 所以, 我们将改用其他的环境变量来区别: new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', 'process.env.API_ENV': `"${process.env.API_ENV || 'development'}"`}) 像这样, NODE_ENV 始终为 production. 而我们实际开发/产品环境, 用 process.env.API_ENV 变量来使用(由于该项目是一个 koa 接口服务项目, 所以这样进行命名, 可以改成任意的, 你开心就好). 动态配置打包 注意 我们以前在 node.js 后端项目中, 动态配置加载一般是这样写: const ENV = process.env.NODE_ENV || 'development';// eslint-disable-next-line import/no-dynamic-requireconst options = require(`./_${ENV}`);module.exports = options; 为了提高阅读性, 和可能存在ENV的复用, 我们会单独定义一个变量. 在 webpack 打包的项目中直接这样做的话……

网友NO.120945

简述vue-cli中chainWebpack的使用方法

前言 在项目开发中我们难免碰到需要对webpack配置更改的情况,今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用;用configureWebpack简单的配置;用chainWebpack做高级配置;包括对loader的添加,修改;以及插件的配置 1、首先简单介绍一下webpack中loader的简单使用: loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容,在你打包的时候对某些内容需要loader来处理一下,比如css模块;默认webpack只会处理js代码,所以当我们想要去打包其他内容时,就需要相应的loader去处理某些内容 使用方法: 在配置文件中 webpack.config.js 加入module属性,该属性是一个对象,在这个属性中有一个rules字段,先上代码 module:{ rules:[{ test:/\.js$/, use:[{ loader:'babel-loader', options: { presets: [ "es2015", "react" ], plugins: ["syntax-dyn……

网友NO.881193

详解组件库的webpack构建速度优化

背景 在公司的主要工作是组件库(基于vue的ui组件库,类似element-ui)的开发,也已经有两个多月,期间一直觉得项目的开发构建太慢,每次开发打开开发环境需要 40s 左右,简直不能忍。前前后后尝试了各种优化手段,但是都不理想。终于在今天,找到了问题所在,构建速度提升了 50% 以上,现在只需要 17s 左右,整个心情都好了。现在记录一下所用到的各种优化手段,因为是开发环境,所以只考虑构建速度。 各种配置项的优化 主要是对一些loader添加 include exclude之类的小优化,其实这一点并没有带来多少性能的提升,只是一些安慰作用吧。 引入happypack 之前有看到相关文章介绍 happypack 采用多线程处理,能大大提升项目的构建速度。嗯,我觉得这个靠谱。看了下github上的文档,赶紧试试水。 修改webpack一些loader配置,使用happypack // config.dev.js{ // ... m……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757